Ways to confirm the visibility of a web element on the screen with serenity-js

In the current project, I am utilizing the Serenity-js BDD framework with a screenplay pattern approach. However, I am encountering an issue when attempting to assert the visibility of an element on a web page using the "that" method from the Ensure class.

Sample 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 :

An error stating 'Argument of type 'SuccessCondition' is not assignable to parameter of type 'Assertion'. Property 'answeredBy' is missing in type 'SuccessCondition' but required in type 'Assertion'' has been encountered.

typescriptautomationprotractorserenity-bddserenity-js

Answer №1

It appears that the code snippet you provided may be a combination of Serenity/JS 1.x and 2.x syntax.

For Serenity/JS version 2, to use this version, you will need to install 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

Here's how you would write the code:

// 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())

If you are using Serenity/JS version 1, you would need to extract a WebElement from the Target before proceeding:

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

I hope this explanation is helpful!

Regards, John

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve text from an input field using Protractor

Looking through the protractor documentation, I came across an interesting example: describe('by model', function() { it('should find an element by text input model', function() { var username = element(by.model('username&ap ...

angularjsprotractor

The implementation of conditional parameter types in TypeScript

I am struggling with a function where the type of the first argument is determined by the second argument's value of true or false According to my logic, if userExists is true, data should be a string and if it's false, data should be a number. ...

typescriptgenericstypesconditional-statements

Utilize a variable from one Angular component in another by sharing it between .ts files

My issue involves dynamically adding items to a todo list and wanting to exclude certain items. The challenge lies in the fact that the list itself is located outside of the task component: Within the task.component.html file, I iterate through the list f ...

angulartypescript

An error may occur when Typescript is instantiated with a varying subtype of constraint

I am encountering the "could be instantiated with a different subtype of constraint" error when trying to return a result that should match the expected type of a function. Despite removing irrelevant details, I'm struggling to pinpoint what exactly I ...

typescriptgenerics

How can I personalize a Leaflet popup with image thumbnails and additional customization options?

I've been researching and trying out different solutions, but so far none of them have worked for me. My goal is to dynamically add a title, image, address, and name to popups on my leaflet map as data comes in. However, I'm experiencing some cha ...

angulartypescriptleafletpopup

Confirming that the NGRX Dictionary value is set

After upgrading from Angular 7.1.4 to 8.2.0 and Typescript from 3.1.6 to 3.5.3, I encountered an issue with identification of array items. Prior to the upgrade, TypeScript correctly recognized that the array item was not undefined. However, post-upgrade, ...

angulartypescriptngrxrxjs6ngrx-entity

Trigger refetchQueries post-execution of a mutation operation

In the past, I executed a mutation in a similar manner as shown below: export const useEditLocationName = () => { const [editFavoriteLocationName] = useEditFavoriteLocationNameMutation({ refetchQueries: [{ query: GetMyFavouritePlacesDocument}], ...

javascriptreactjstypescriptgraphqlapollo

Tips for modifying TypeScript class types based on a parent class object property?

As part of a project, I have created two classes: ParentClass childrenClass which extends the ParentClass class Displayed below is the code for my ParentClass: interface ConfSetup<T extends boolean> { enabled: T; permissions: bigint[]; locati ...

typescriptdiscord.js

What causes Gun.js to generate duplicate messages within a ReactJs environment?

I need assistance with my React application where gun.js is implemented. The issue I am facing is that messages are being duplicated on every render and update. Can someone please review my code and help me figure out what's wrong? Here is the code s ...

javascriptreactjstypescriptgun

How can we implement `injectReducer` in Redux with TypeScript?

I have been working on a TypeScript React application with Redux to manage state. To dynamically add reducers, Redux suggested implementing an injectReducer function. In a JavaScript project, I successfully implemented this function. However, I am strugg ...

reactjstypescriptredux

Collaborative React front end elements are now housed in their own TypeScript project within Visual Studio 2017

In Visual Studio, our project structure includes the following: PublicClient, Admin, and SharedComponents. The SharedComponents project is essential because many components are shared between our client and admin interface. This structure is based on the f ...

visual-studioreactjstypescriptnpmwebpack

Access the Ionic2 App through the Slider option

Trying out Ionic 2 and facing an issue. Created a default side-menu app from CLI with a slider. Need to start the actual side-menu app from the last slide on button click or anchor link. My app.ts: @Component({ templateUrl: 'build/app.html' }) ...

angulartypescriptionic2ionic3

Why doesn't Typescript 5.0.3 throw an error for incompatible generic parameters in these types?

------------- Prompt and background (Not crucial for understanding the question)---------------- In my TypeScript application, I work with objects that have references to other objects. These references can be either filled or empty, as illustrated below: ...

typescriptgenericsconditional-typesindexed

Verify the dates in various formats

I need to create a function that compares two different models. One model is from the initial state of a form, retrieved from a backend service as a date object. The other model is after conversion in the front end. function findDateDifferences(obj1, ...

javascripttypescript

Adjusting the timeout for a particular operation according to its unique identifier

I am looking for a solution to call a method that posts an answer after an input change in my Angular project. I want to reset the timeout if another input change occurs to avoid multiple posts. Is there a smart way to achieve this? My project involves po ...

javascriptangulartypescript

The problem arises when the type of a Typescript literal union becomes more specific within React children

Currently, I am in the process of converting our React/Redux project to TypeScript and encountering a challenge with TypeScript literal type union types. The issue that I'm facing is as follows: I have instantiated a Wrapper component with a type pr ...

javascriptreactjstypescript

Substitute terms in a sentence according to the guidelines

Looking to transform strings based on specific rules? "Hello {{firstName}}, this is {{senderName}}." Consider the following rules: rules = { firstName: "Alex", senderName: "Tracy" } The expected output would be: "Hello Alex, this is Tracy." If yo ...

typescript

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

javascriptcssangulartypescriptangular7

Should mutators be encapsulated within a class contained in a JS Module for better code organization and maintainability?

In order to maximize functionality of our new product using JavaScript, we have implemented an Authentication module that manages a tokenPromise which is updated upon user logins or token refreshes. It seems imperative to allow for mutation in this process ...

javascripttypescriptecmascript-6functional-programming

Using Angular 5 to link date input to form field (reactive approach)

I'm encountering an issue with the input type date. I am trying to bind data from a component. Below is my field: <div class="col-md-6"> <label for="dateOfReport">Data zgłoszenia błędu:</label> <input type="date" formC ...

javascriptangulartypescript