Serenity-js: Assertion for DOM not present in web page

[WebTestNinja]

Hi Jan,

i would like to assert cucumber scenario where error message is not displayed when i just switch focus on two blank input field on web page but Error message displayed when i enter some text in input field and then make it blank by deleting entered text.

The challenge here i am facing that when trying to assert error message DOM element not present on screen.

I am trying to do something like this

static FB_UserName_Error = Target.the('FB username input').located(by.css('.form-container .error'));

EnsureThat(FlyingBlueUI.FB_UserName_Error).isNotVisible()

export const EnsureThat = (field: Target) => ({
   isNotVisible: () => Task.where(`#actor ensures that the ${field} is not visible`,
      See.if(WebElement.of(field), el => expect(el).to.eventually.be.not.present),
    ),
});

But i am getting error - NoSuchElementError: No element found using locator: By(css selector, .form-container .error)
because error message is not displayed by just focus on input field and hence .error class element is not present in web page. And when trying to locate element for assertion, it throw error.

Please suggest how can i assert when DOM element is not available on web page.

[jan-molak]

Hi there!

Protractor docs suggest the following approach:

// Element exists.
expect(element(by.binding('person.name')).isPresent()).toBe(true);

// Element not present.
expect(element(by.binding('notPresent')).isPresent()).toBe(false);

Since WebElement.of(field) returns an ElementFinder, you should be able to do something along the lines of:

See.if(WebElement.of(field), el => expect(el.isPresent()).to.eventually.be.false)

Let me know if that helps!
Jan

[WebTestNinja]

Thank you Jan for your help on this.
It works.