Struggling with verifying the visibility of multiple elements using the toBeVisible() assertion

While running a test in debug mode, I've observed that toBeVisible() fails when it detects multiple elements. Interestingly, toBeVisible without the parenthesis passes the assertion in such cases.

I'm facing a specific scenario where I need to pass a timeout argument with toBeVisible(), as the element being waited for is a rendering of pages from an uploaded document, which can vary in display time from 2 seconds to 2 minutes.

The issue arises when the locator is attached to multiple pages, causing the following line to fail:

await expect(locator).toBeVisible({ timeout: 10000 })

To overcome this, I temporarily adjusted the global expect timeout value in the config file so that the following code works:

await expect(locator).toBeVisible;

However, I am looking for a way to avoid setting a high timeout globally and instead follow the documentation's guidelines specifically designed for handling scenarios involving multiple elements. Is there a solution available for this?

typescriptplaywright

Answer №1

If you want to verify multiple elements, you can use the following approach:

await expect(selector).toHaveItems(42);

To specify a more precise selector, you can simplify it as follows:

await expect(selector).atPosition(42).toBeVisible();

This code will target the 42nd element. Alternatively, you can modify it to 0.

The reason for not using parentheses is that the function is not actually being executed, so you can simply omit them. :)

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

Tips for automatically adjusting the row height in a table with a static header

On my page, I have a header, footer, and a single table with a fixed header. You can check out the code in the sandbox (make sure to open the results view in a new window). Click here for the code sandbox I am looking to extend the rows section so that i ...

reactjstypescriptmaterial-ui

Issue encountered: "ERROR TypeError: Upon attempting to patchValue in ngOnInit(), the property 'form' is undefined."

Can someone help me figure out how to use the patchValue method in the ngOnInit() function? I'm trying to populate a HTML select dropdown with a value from a link, but it's not working as expected. Note: onTest() works perfectly when called sepa ...

angulartypescriptangular-reactive-forms

Next.js Pre-rendering Issue: Error encountered when trying to access properties of a null object

Using Next.js for a React application (full code available here.) Encountering an unusual error while running next build, showing errors related to prerendering on five pages: spenc@WhiteBoxu:~/workout-tracker$ next build info - Loaded env from /home/spe ...

javascriptreactjstypescriptnext.jsreact-query

Perform a child component function in Angular

I'm working on a project with a child component as a map and a parent component as a form. The parent component has a field for writing the address, and when an address is entered, an HTTP request is triggered to find the latitude and longitude coordi ...

angulartypescript

Exploring disparities between the Client SDK and Admin SDK in conducting firestore queries

I am encountering difficulties with my query while running it in Firebase Functions. It functions perfectly on the client side, but fails to work in Functions. I am curious if there is a way to modify it to function with Admin SDK as well. Am I making any ...

typescriptfirebasegoogle-cloud-firestoregoogle-cloud-functionsgoogle-admin-sdk

react-hook-form replaces the onChange function causing delays in updating the value

Recently, I created a unique Select component utilizing useState and onChange. I attempted to integrate this custom component with the powerful react-hook-form. Allow me to share the code snippet for the bespoke Select component. const Select = forwardRef ...

reactjstypescriptselectonchangereact-hook-form

Using Angular, create mat-checkbox components that are dynamically generated and bound using

In my Offer class, I have a property called "units" which is an array of objects. export class Offer { public propertyA: string; public propertyB: string; public units: Unit[]; } export class Unit { public code: string, public name: ...

angulartypescriptangular-material

Angular 4 fetches the number obtained from a GET request

In my spring-boot back-end app, I have defined a query as shown below: @Query("SELECT COUNT(*) " + "FROM Foo " + "WHERE name = :name and surname = :surname ") Integer countByNameAndSurname(@Param("name") String name, @Param("surnam ...

angulartypescriptget

Tips for effectively handling notifications using a single state management system

This React project showcases the Notification System demo provided by Mantine. It includes several function components utilizing notification. const A = () => { useEffect(() => { notifications.show({ // config }); }, []); retur ...

reactjstypescriptmantine

Tips for navigating through a nested JSON object with loops

Is it possible to access the value of the Address object within an interface in Angular using *ngFor? export interface User { id: number; name: string; username: string; email: string; address: Address; } export interface Address { st ...

angulartypescript

Angular 2: Enhancing User Experience with Pop-up Dialogs

Looking to implement a popup dialog that requests user input and returns the value. The popup component is included in the root component, positioned above the app's router outlet. Within the popup component, there is an open() method that toggles a ...

javascriptangulartypescript

Changing the row property value of a textarea dynamically based on text input in ReactJS

Here is what I have tried: <textarea rows='2' onChange={e => setSomething(e.target.value)} className='form-control text-area ' value={something} placeholder='write something'> </textarea> output: https://i ...

javascriptreactjstypescript

What's the best way to implement satisfies with a generic type?

In my development process, I am working with components that have default values combined with props. To streamline this process, I created a single function for all components: export function getAssignProps <T extends {}>(propsMass:T[]){ return ...

reactjstypescripttypescript-typingstypescript-generics

The issue with Angular 4 imports not refreshing in a .less file persists

Currently, I am in the process of developing a small Angular project that utilizes less for styling purposes. My intention is to separate the styling into distinct folders apart from the components and instead have a main import file - main.less. This fil ...

cssangulartypescriptimportless

Is there a specific method for conducting a production build using AngularCLI rc.1?

Just recently upgraded to angular-cli version 1.0.0-rc1 by following the guidelines provided on the wiki. The application functions properly when I execute ng serve. Similarly, the app works as expected when I run ng build. However, encountering an issu ...

angularjstypescriptangular-clitypescript2.0

Learn the proper way to write onClick in tsx with Vue 2.7.13

current version of vue is 2.7.13 Although it supports jsx, I encounter a type error when using onClick event handling. The type '(event: MouseEvent) => Promise<void>' cannot be assigned to type 'MouseEvent' Is there a correct ...

javascripttypescriptvue.jsvuejs2tsx

What is the best way to create a function that shifts a musical note up or down by one semitone?

Currently developing a guitar tuning tool and facing some hurdles. Striving to create a function that can take a musical note, an octave, and a direction (up or down), then produce a transposed note by a half step based on the traditional piano layout (i. ...

javascripttypescript

What is the best way to utilize a variable from a function when using ngClass in Angular?

Currently, using Angular 4, I'm attempting to utilize ngClass by comparing a variable called sender which is created within a function with an object from an array known as item.sender. Below is the snippet of HTML code: <ion-card *ngFor="let ite ...

angulartypescriptangular5

Issue encountered with ng-include compatibility in Angular 5

Just getting started with Angular and working on a small test project using Angular 5 and Visual Code. I'm attempting to use ng-include but the template is not displaying. src add-device add-device.component.html add-device.com ...

angulartypescript

React Typescript: Turn off spellchecking

Struggling to turn off spell check for typescript <form> <input type='text' name='accountName' ref={accountName} onChange={checkName} spellCheck='false' // <====== Disable spellche ...

reactjstypescript