ScriptTimeoutError while testing angular material dropdown e2e

Question

I have this test case

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();
});

and here is toggleDD

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

but this shows

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"])

and fails the test case, I have tried putting await before browser.wait, tried by.xpath, by.id, by.css to get dropdown.

I tried it in debug mode, elements are present on DOM but somehow it is not getting the element.

Checked other element to get for each element it is showing

- 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)

I tried

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

with this div by

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

even for this I am getting scripttimeout err

More Info

Here is 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();
});

and 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

Looking at the error, it appears that the element is not displayed before you want to interact with it. until.elementLocated appears to call into findElements and return the first element.

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

This means that it will return it if it is in the DOM but doesn't mean that it will be displayed or enabled to click. The isDisplayed call explicitly checks that the element is displayed.

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

Maybe instead do something like this?

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.