javascript - Protractor 等待页面完全加载

Question

在转到 https://docs.angularjs.org/tutorial 后，我正在尝试单击教程下的“0 - Bootstrapping” ，但是 Protractor 没有等待页面完全加载，所以我得到一个错误

Failed: Cannot read property 'click' of undefined

我尝试使用

手动等待页面加载

browser.driver.sleep(10000);

但我仍然遇到同样的错误。

conf.js

exports.config = {
// seleniumAddress: 'http://localhost:4444/wd/hub',
getPageTimeout : 12000000,
capabilities: {
    'browserName': 'chrome'
},
specs: ['todo-spec.js'],
jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 1440000,
}
};

tod​​o-spec.js

describe('angularjs homepage', function () {
it('should greet the named user', function () {
    var dropdown = element.all(by.css('.dropdown')).first(),
        dropdownToggle = dropdown.element(by.css('.dropdown-toggle')),
        dropdownMenu = dropdown.element(by.css('.dropdown-menu')),
        menuItem = dropdownMenu.all(by.tagName('li')).first();

    browser.get('http://www.angularjs.org');
    dropdownToggle.click();
    menuItem.click();

    expect(browser.getCurrentUrl()).toEqual('https://docs.angularjs.org/tutorial');
    //waiting 10 seconds for the page to fully load
    browser.driver.sleep(10000);
    browser.waitForAngular();
});
it('', async function () {

    /*  tried waiting for the element to be present
    var EC = protractor.ExpectedConditions;
    var e = element.all(by.css('.nav-index-listing'))[0];
    browser.wait(EC.presenceOf(e), 10000);

    Failed: Cannot read property 'isPresent' of undefined
    */

    //clicking '0 - Bootstrapping' under Tutorial
    element.all(by.css('.nav-index-listing'))[0].click();
    expect(element(by.cssContainingText('.pln', 'npm install')).isEnabled()).toBe(true);
    // Failed: Cannot read property 'click' of undefined

});
});

编辑

已替换

element.all(by.css('.nav-index-listing'))[0].click();
    expect(element(by.cssContainingText('.pln', 'npm install')).isEnabled()).toBe(true);

通过

        element.all(by.css('.nav-index-listing')).get(0).click();
    browser.wait(protractor.ExpectedConditions.urlIs("https://docs.angularjs.org/tutorial/step_00"), 5000);
    expect(browser.getCurrentUrl()).toEqual('https://docs.angularjs.org/tutorial/step_00');
    expect(element(by.cssContainingText('.pln', 'npm install')).isEnabled()).toBe(true);

出现错误

Failed: Wait timed out after 5001ms

如果我删除 browser.wait 我得到

Expected 'https://docs.angularjs.org/tutorial' to equal 'https://docs.angularjs.org/tutorial/step_00'.

Answer 1

首先 browser.driver.sleep(10000) 不是必需的。对于页面加载，您可以使用 protractor.ExpectedConditions。如果页面已经加载，它将减少不必要的等待 10 秒。

其次，您的代码中存在一个小错误，这是问题的根本原因。

改变这一行

element.all(by.css('.nav-index-listing'))[0].click();

为此

 element.all(by.css('.nav-index-listing')).get(0).click();

更新:

1. element.all(by.css('.nav-index-listing')) 只会给你 li 将通过测试的元素。但是单击它不会将您带到所需的页面。
   将其更改为:

   element.all(by.css('.nav-index-listing a')).get(0).click();  
   

2. 在这种情况下，[0] 将不起作用，因为返回值不是数组。它是 ElementArrayFinder 类型。所以，这就是为什么需要 .get(0)。

3. 如果您也检查以下条件，以进行测试会更好。

   browser.wait(EC.urlIs("https://docs.angularjs.org/tutorial/step_00"), 5000);    
   expect(browser.getCurrentUrl()).toEqual('https://docs.angularjs.org/tutorial/step_00');  
   

   这些条件检查您当前的 URL 是否为 https://docs.angularjs.org/tutorial/step_00。