I have an HTML snippet as follows:
...
<div class="show-div account">
<ul >
<li>
<a href="/account/login">Login</a>
</li>
<li>
<a href="/account/register">Register</a>
</li>
</ul>
</div>
...
I'd like to check whether the login page is clicked once the Login button is clicked. What I understood from the docs, the following should work but it won't.
const loginAction = await accountIcon.element(by.className('show-div')).$('ul').$$('li').filter(async function(elem) {
const a = elem.element(by.css('a'));
const attr = await a.getAttribute('href');
return attr.includes('/account/login');
}).first().$('a');
await loginAction.click();
const url = await browser.getCurrentUrl();
expect(url).endsWith('/account/login');
I'm using "protractor": "7.0.0" with Angular 10. Those are auto-generated by the JHipster framework. I'm not sure whether I need to use async/await
mechanism. Considering the ElementFinder
API, I should but most of the examples do not utilize it.
(BTW, SELENIUM_PROMISE_MANAGER is disabled)
I'd appreciate any help. Thanks in advance.
Your first problem could have been your locator. Filtering could not work, then chaining may have problems, element...element.all...first().element()
If the url is static you can use that as locator, and avoid all this
let elem = $('[href="/account/login"]')
Second possible problem, after you click, you may need to wait. Otherwise getCurrentUrl
may return the original url since it hasn't loaded the new page yet. In this case I can recommend you to wait for that url
var EC = protractor.ExpectedConditions;
// Waits for the URL to contain 'foo'.
await browser.wait(EC.urlContains('/account/login'), 15000);
In this part of the script, if url is never present it will fail with explicit error, saying this url wasn't present. Otherwise, you don't need to assert the url. If the script passed, this may serve you as a warant that the url is there, no need to assert it