0

So I have this issue which really driving me crazy. In the Angular app, after I click a save button, there is an toast message. While the toast is displayed, it overlaps the user menu with log out button. Eventually the toast is removed (also from the DOM) and I can log out. The problem is then in the first 'it' block it works good, it waits for the toast to disappear and the it clicks on the menu and log out. But when the second 'it' block runs, basically with the same code, it just brakes and gives the error Failed: element click intercepted: Element class="nav-link user-name" data-toggle="dropdown">...</a> is not clickable at point (1714, 31). Other element would receive the click: <div aria-live="polite" role="alertdialog" class="toast-message.... Sometimes it even brakes in the first 'it' block.

This is the func I use:

async waitForToastToDisappear() {
let toast = element(by.xpath('//*[@id="toast-container"]/div'));
await browser.wait(ExpectedConditions.invisibilityOf(toast), 10000, 'Toast message did not completely disappear');

I also tried it with stalenessOf, but it has the same effect.

And this is the actual test

beforeEach(async function() {
await login.loginToApp('sysadmin', 'sysadmin');

afterEach(async function() {
await login.loginOut();

it('should change the date, navigate to screen and add record', async function () {
await calendar.setDefaultTestDate();

await browser.get(screenUrl);
await browser.wait(ExpectedConditions.visibilityOf(firstTab), 10000, 'Tab not fully loaded');

await elem.first().sendKeys('12');
await element(by.css('div.btn.btn-primary.btn-sm')).click();
await page.clickElement(element(by.cssContainingText('.navbar-brand li a', 'Home')));
await page.waitForElement(element(by.css('.main-view')));
await page.waitForToastToDisappear();

It is maybe worth mention, that I also use the browser.waitForAngularEnabled(false); in the loginToApp for the login, since the login page is not Angular and I've read that it could result in some test flakiness, but I am not sure...

radoja
  • 13
  • 3

1 Answers1

0

Few approaches I see:

  1. Simply substitute regular logoutButton.click() to 
browser.executeScript(
  "arguments[0].click();",
  $logoutButton.getWebElement()
)

what it'll do is it will click on the element regardless of page layout

  1. Be brutal with it :) and write a function to remove that element from DOM, if it's not a part of your test. Something like this:
let removeMessage = async function () {
  if (await message.isPresent()) {
    await browser.executeScript('return arguments[0].remove()', message.getWebElement());
  }
}

and then add it to your afterAll()

If for whatever reasons these don't work for you, lmk we'll try to debug what goes wrong in your tests

Sergey Pleshakov
  • 7,964
  • 2
  • 17
  • 40
  • Hi, thanks for your tips. I tried the first one and it did look promising, but then I got the same error. It seems the tests just fail randomly. One time they all pass and if I run them again within 5min, they just fail, because the click is intercepted....and for the 2nd tip I dont understand what the code actually does and why should I add it to the `afterAll()`? – radoja Oct 11 '19 at 07:32
  • if you open dev console in chrome lets say, you can select any element, right click on it and remove from the DOM like it was never there. What 2nd code does is it removes the message that overlaps the button. Wen I said add it to `afterAll` I meant put it before `logout()` method to make sure the element in not in the DOM before logging out – Sergey Pleshakov Oct 11 '19 at 14:21