测试角度材料下拉菜单e2e时发生ScriptTimeoutError

如何解决测试角度材料下拉菜单e2e时发生ScriptTimeoutError

我有这个测试用例

it("should have list",async () => {
    // wait until list populated
    browser.wait(protractor.until.elementLocated(by.css(COMPONENT_CSS.ITEM)));

    console.log("First...............");
    try {
        await componentPage.toggleDD();
    } catch (err) {
        console.log("err",err);
    }
    console.log("Second...............");
    const count = await componentPage.getCount();
    console.log("count",count);
    expect(count).toBe(this.COUNT);
    await componentPage.toggleDD();
});

这是toggleDD

async toggleDD(): Promise<any> {
    const _dropdown = await element(by.id(this.CSS.DD_ID));
    await _dropdown.click();
}

但这显示

err ScriptTimeoutError: script timeout
  (Session info: chrome=84.0.4147.135)
  (Driver info: chromedriver=84.0.4147.30 (48b3e868b4cc0aa7e8149519690b6f6949e110a8-refs/branch-heads/4147@{#310}),platform=Windows NT 6.3.9600 x86_64)
    at Object.checkLegacyResponse (E:\PROJECTS\NewProject\node_modules\selenium-webdriver\lib\error.js:546:15)
    at parseHttpResponse (E:\PROJECTS\NewProject\node_modules\selenium-webdriver\lib\http.js:509:13)
    at E:\PROJECTS\NewProject\node_modules\selenium-webdriver\lib\http.js:441:30
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
From: Task: Protractor.waitForAngular() - Locator: By(css selector,*[id="my-dropdown"])

并通过了测试用例，我尝试将await放在browser.wait之前，尝试by.xpath，by.id，by.css来获得下拉列表。

我在调试模式下尝试过，元素存在于DOM上，但不知何故没有得到该元素。

检查其他元素以获取显示的每个元素

- Failed: script timeout
    (Session info: chrome=84.0.4147.135)
    (Driver info: chromedriver=84.0.4147.30 (48b3e868b4cc0aa7e8149519690b6f6949e110a8-refs/branch-heads/4147@{#310}),platform=Windows NT 6.3.9600 x86_64)

我尝试过

<div id="dummyId">Hello</div>

此div由

const _divText = await element(by.id("dummyId")).getText();

即使这样，我也会得到 scripttimeout错误

更多信息

这里是beforeAll

beforeAll(async () => {
    componentPage = new HomePage();
    helperService = new HelperService();

    COMPONENT_CSS = componentPage.CSS;
    await helperService.navigate(helperService.PAGE_URL.HOME);
    try {
        await helperService.skipIntro();
    } catch (err) {
        console.error("Intro element not found");
    }
    // browser.waitForAngular();
});

和 protractor.conf.js

// Protractor configuration file,see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require("jasmine-spec-reporter");

exports.config = {
    allScriptsTimeout: 50000,specs: [
        "./src/login/login.component.e2e-spec.ts","./src/home/home.component.e2e-spec.ts",],capabilities: {
        "browserName": "chrome"
    },directConnect: true,baseUrl: "http://localhost:4200/",framework: "jasmine",jasmineNodeOpts: {
        showColors: true,defaultTimeoutInterval: 1000000,print: function () {
        }
    },onPrepare() {
        require("ts-node").register({
            project: require("path").join(__dirname,"./tsconfig.e2e.json")
        });
        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
    }
};

解决方法

查看该错误，似乎在您要与该元素进行交互之前未显示该元素。 until.elementLocated似乎可以调用findElements并返回第一个元素。

请参见https://github.com/SeleniumHQ/selenium/blob/trunk/javascript/node/selenium-webdriver/lib/until.js#L241

这意味着如果它在DOM中，它将返回它，但并不意味着它将被显示或允许单击。 isDisplayed调用显式检查是否显示了该元素。

请参见https://github.com/SeleniumHQ/selenium/blob/trunk/javascript/node/selenium-webdriver/lib/webdriver.js#L2296

也许可以做这样的事情？

it("should have list",async () => {
  // wait until list populated
  await browser.wait(async () => {
    return element(by.css(COMPONENT_CSS.ITEM)).isDisplayed();
  },10000);  // wait 10 seconds,make sure your protractor suite does not time out.