ScriptTimeoutError while testing angular material dropdown e2e - testing

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.