How to assert that web element is visible on the screen using serenity-js?

Question

I am using Serenity-js BDD framework with screenplay pattern in my project. Here I am not able to perform assertion for visibility of an element on web-page using Ensure class's "that" method.

Code :

Page Element -

static searchPatientsVerificationRow = Target.the('verification record').located(by.xpath("//div[@class='row']//tr")); 

Test Script Step :

return Ensure.that(TaggingSearchControls.searchPatientsVerificationRow,Is.visible()) 

Error :

Argument of type 'SuccessCondition' is not assignable to parameter of type 'Assertion'. Property 'answeredBy' is missing in type 'SuccessCondition' but required in type 'Assertion'

Answer 1

It seems like the code sample you posted might be using a mixture of Serenity/JS 1.x and 2.x syntax.

With Serenity/JS version 2, which you can get by installing the following dependencies (see an example):

npm install --save-dev @serenity-js/core@next @serenity-js/assertions@next @serenity-js/protractor@next @serenity-js/serenity-bdd@next 

you'd write it as follows:

// in page object file
import { Target } from '@serenity-js/protractor';
import { by } from 'protracter';

class TaggingSearchControls {
    static searchPatientsVerificationRow =
        Target.the('verification record').located(by.xpath("//div[@class='row']//tr"));
}

// in test file
import { Ensure } from '@serenity-js/assertions';
import { isVisible } from '@serenity-js/protractor';

Ensure.that(TaggingSearchControls.searchPatientsVerificationRow, isVisible()) 

With Serenity/JS version 1 you'd need to extract a WebElement from the Target first:

Ensure.that(WebElement.of(TaggingSearchControls.searchPatientsVerificationRow), Is.Visible())     

Hope this helps!

Jan