Lệnh kiểm tra tab kiểm tra

Question

Trong một trong các thử nghiệm của chúng tôi, chúng tôi cần đảm bảo rằng điều hướng bàn phím tab bên trong biểu mẫu được thực hiện theo đúng thứ tự.

Câu hỏi: Cách thông thường để kiểm tra thứ tự điều hướng tab bằng thước đo góc là gì?

---

Hiện nay chúng tôi đang giải quyết nó bằng cách lặp lại các bước sau cho bao nhiêu lĩnh vực đầu vào hiện trong một hình thức (mã dưới đây):

• kiểm tra các ID của phần tử hiện tập trung (sử dụng getId())
• gửi TAB chìa khóa để các yếu tố hiện đang tập trung

Dưới đây là ví dụ spec:

it("should navigate with tab correctly", function() { 
    var regCodePage = new RegCodePage(); 
    browser.wait(protractor.ExpectedConditions.visibilityOf(regCodePage.title), 10000); 

    // registration code field has focus by default 
    expect(regCodePage.registrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId()); 

    // focus moved to Remember Registration Code 
    regCodePage.registrationCode.sendKeys(protractor.Key.TAB); 
    expect(regCodePage.rememberRegistrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId()); 

    // focus moved to Request Code 
    regCodePage.rememberRegistrationCode.sendKeys(protractor.Key.TAB); 
    expect(regCodePage.requestCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId()); 

    // focus moved to Cancel 
    regCodePage.requestCode.sendKeys(protractor.Key.TAB); 
    expect(regCodePage.cancelButton.getId()).toEqual(browser.driver.switchTo().activeElement().getId()); 

    // focus moved back to the input 
    regCodePage.cancelButton.sendKeys(protractor.Key.TAB); 
    expect(regCodePage.registrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId()); 
}); 

nơi regCodePage là trang một Object:

var RegCodePage = function() { 
    this.title = element(by.css("div.modal-header b.login-modal-title")); 
    this.registrationCode = element(by.id("regCode")); 

    this.rememberRegistrationCode = element(by.id("rememberRegCode")); 
    this.requestCode = element(by.id("forgotCode")); 

    this.errorMessage = element(by.css("div.auth-reg-code-block div#message")); 

    this.sendRegCode = element(by.id("sendRegCode")); 
    this.cancelButton = element(by.id("cancelButton")); 
    this.closeButton = element(by.css("div.modal-header button.close")); 
}; 

module.exports = RegCodePage; 

Nó đang làm việc, nhưng nó không phải là thực sự rõ ràng và dễ đọc mà làm cho nó khó khăn để duy trì. Ngoài ra, một "mùi" khác trong cách tiếp cận hiện tại là một sự sao chép mã.

Nếu cách tiếp cận hiện tại là cách bạn cũng sẽ làm điều đó, tôi sẽ đánh giá cao bất kỳ thông tin chi tiết nào về việc làm cho ứng dụng có thể sử dụng lại được.

Answer 1

Tôi nghĩ PageObject nên xác định danh sách thứ tự tab, vì đó thực sự là thuộc tính trực tiếp của trang và phải dễ đọc như dữ liệu đơn giản. Một loạt các mục có vẻ giống như một đại diện đầy đủ, do đó, một cái gì đó như:

this.tabOrder = [ this.registrationCode, this.rememberRegistrationCode, this.requestCode, this.cancelButton ]; 

Sau đó, bạn cần một chút mã chung có thể kiểm tra thứ tự tab.

function testTabOrder(tabOrder) { 
    // Assumes TAB order hasn't been messed with and page is on default element 
    tabOrder.forEach(function(el) { 
     expect(el.getId()).toEqual(browser.driver.switchTo().activeElement().getId()); 
     el.sendKeys(protractor.Key.TAB); 
    }); 
} 

Sau đó, kiểm tra của bạn sẽ là một cái gì đó như:

it('has correct tab order', function() { 
    var regCodePage = new RegCodePage(); // this should probably be in the beforeEach 
    testTabOrder(regCodePage.tabOrder); 
}); 

Tất nhiên, điều này giả định mỗi phần tử có một "getId()" phương pháp làm việc. (Điều đó có vẻ giống như một giả định hợp lý đối với tôi, nhưng một số môi trường có thể không hỗ trợ nó.)

Tôi nghĩ điều này sẽ giữ trật tự tab độc lập trên PageObject (để dễ dàng đồng bộ với nội dung trang và không không bị mất trong mã xác minh thứ tự). Mã thử nghiệm dường như "lạc quan" (tôi nghi ngờ thế giới thực sẽ giới thiệu đủ các vấn đề mà bạn sẽ kết thúc việc mở rộng mã này một chút).

Tôi chưa thử bất kỳ điều nào trong số này, vì vậy, vui lòng downvote nếu điều này không hiệu quả. :)

Ngoài ra, tôi tin rằng vòng lặp forEach sẽ hoạt động như hiện trạng, nhưng tôi sẽ không ngạc nhiên nếu cần xử lý lời hứa rõ ràng hơn để làm cho phụ thuộc rõ ràng.