测试角度材料下拉 e2e 时出现 ScriptTimeoutError

Question

我有这个测试用例

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 err

更多信息

这里是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 } }));
    }
};

Answer 1

查看错误，似乎在您想要与元素交互之前未显示该元素。 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.