What is the best way to handle an OR scenario in Playwright?

The Playwright documentation explains that a comma-separated list of CSS selectors will match all elements that can be selected by one of the selectors in that list. However, when I try to implement this, it doesn't seem to work as expected.

For example, if I use the following code:

await expect(page.locator('text="Banana"')).toBeVisible();

it successfully matches the element. But when I try this code:

await expect(page.locator('text="Banana", text="foo"')).toBeVisible();

the test hangs indefinitely.

I am left wondering, is the comma-separated list not considered a valid "CSS selector"? How can I accomplish the same functionality properly?

javascripttypescriptplaywright

Answer №1

True, this does not abide by typical CSS selector syntax. Nevertheless, there is a workaround:

await expect(page.locator('span:has-text("Banana"), span:has-text("foo")')).toBeVisible();

Answer №2

Exciting news: Starting from version 1.33, Playwright now supports the use of OR condition natively.

await expect(locatorA.or(locatorB)).toBeVisible()

Here's a Simple Example:

Imagine you need to click on a "New email" button, but sometimes a security settings dialog pops up instead. With Playwright's new feature, you can wait for either the button or the dialog and take appropriate action.

const newEmail = page.getByRole('button', { name: 'New' });
const dialog = page.getByText('Confirm security settings');
await expect(newEmail.or(dialog)).toBeVisible();
if (await dialog.isVisible())
  await page.getByRole('button', { name: 'Dismiss' }).click();
await newEmail.click();

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

Struggling with implementing the use of XMLHttpRequest to transfer a blob data from MySQL to JavaScript

I have a blob stored in my local WAMP64/MySQL server that I need to retrieve and pass to an HTML file using XMLHttpRequest. I know I should set responseType="blob", but I'm not sure how to transfer the blob from PHP to JavaScript in my HTML file. Any ...

javascriptphphtmlmysqlajax

Steps for creating a TypeScript class that can implement an interface

As a beginner in TypeScript, I am looking for help with the following code snippet: async function sleep(ms: number) { return new Promise((resolve, reject) => { setTimeout(() => resolve(), ms) }) } async function randomDelay() { ...

javascripttypescriptinterface

Having trouble accessing env variables from React Component in Next.js?

I recently set up a Next.js project and included an .env file to store environment variables used in my server.js file. However, I am facing an issue when trying to access these variables from a component. Can anyone provide guidance on how to resolve this ...

javascriptreactjsnext.js

Implementing a NestJs application on a microcomputer like a Raspberry Pi or equivalent device

I'm facing a challenge in trying to find a solution for what seems like a simple task. I am aware that using the Nest CLI, I can utilize the command "nest build" to generate a dist folder containing the production files of my project. However, when I ...

javascriptnode.jstypescriptnestjs

Is it not possible to call a function directly from the controller in AngularJS?

I have been trying to update a clock time displayed in an h1 element. My approach was to update the time by calling a function using setInterval, but I faced difficulties in making the call. Eventually, I discovered that using the apply method provided a s ...

javascriptangularjs

Using Express middleware in a TypeScript Express application

I'm currently converting the backend of an ExpressJS application to Typescript. While working on the auth.routes.ts file, I encountered an issue with the middleware (authMiddleware). It seems like there might be a typing error, as the same code in the ...

javascripttypescriptexpressmiddleware

I am having trouble resolving 'otp-input-react' in my project directory at D:projectappsrc

I have been troubleshooting this issue but haven't been able to find a solution yet. I even tried uninstalling and reinstalling the package, but it still isn't working as expected. Here are some images for better clarity: https://i.stack.imgur.c ...

javascriptreactjsnpm

Learn the technique for dynamically modifying Angular components within the main root component during runtime

I am looking to incorporate a dynamic form where the configuration button triggers the switch from app-login-form to login-config-form. app.component.html <div class="container p-5"> <app-login-header></app-login-header> <div cla ...

angulartypescriptangular-components

Exploring the use of barcodes with node.js

Having some issues with generating a barcode using a barcode module from NPMJS called npm i barcode. I am getting an error message res is not defined even after following the instructions. Can someone please guide me in the right direction? Here is my code ...

javascriptnode.jsbarcode

What is the method for dynamically assigning a name to ngModel?

I have the following code snippet: vmarray[]={'Code','Name','Place','City'} export class VMDetail { lstrData1:string; lstrData2:string; lstrData3:string; lstrData4:string; lstrData5:string; ...

angulartypescript

gathering identical objects in the collection

I need to calculate the total time of the specified objects and display it in a single list. Here is the object data: var list = [ { 'user': 'Tom', time: 270547 }, { 'user': 'Alex', time: 82081 }, { 'user&apo ...

javascriptnode.js

Transform a dynamic web page into a static one using Next.js

Utilizing Next.js and React.js, I create dynamic web pages. Specifically, I generate user-related web pages that need to be updated when there are changes in the user data. How can I generate static HTML pages from this updated data within Next.js? Are the ...

javascriptreactjsnext.js

Tips for optimizing the performance of a sine wave animation

After experimenting with JavaScript, I've managed to create a visually appealing sine wave animation but it's causing performance issues due to the high number of vectors being generated. My current setup involves utilizing the p5js library. Bel ...

javascriptanimationtrigonometryp5.js

Is there a way to retrieve the objects generated by DirectionsRenderer on Google Maps V3?

Is there a simple method to access the objects and properties of the markers and infowindows that are generated by the DirectionsRenderer? (such as the "A" and "B" endpoints of the route) I want to swap out the infowindows for the "A" & "B" markers wi ...

javascriptgoogle-mapsgoogle-maps-markersinfowindow

How to troubleshoot syntax errors when using the delete function in Three.js within Eclipse

When using the Javascript Library Three.js, it is important to note that the delete keyword can be used as an object property. While this is valid under ECMAScript 5 standards, Eclipse currently only supports ECMA 3. As stated in the Mozilla reference, re ...

javascripteclipsethree.js

Can JQuery's 'unslider' be customized to only change the backgrounds?

Check out my source at this link: http://codepen.io/anon/pen/Bvkjx Observe how the content and background images rotate correctly. Now, I'm curious if it's feasible to keep the following content static <p>SOME CONTENT1</p> while ...

javascriptjqueryhtmlcss

CSS code for vertical navigation arrows to remain on both the left and right sides of the webpage

I'm struggling a bit with the CSS. I want to recreate the same effect as seen on . The left and right navigation arrows stay fixed vertically even when scrolling up or down the page. Does anyone have any code examples for that? ...

javascriptjqueryhtmlcss

Is it possible to set data using a React Hooks' setter before the component is rendered?

Instead of making a real API call, I am exporting a JS object named Products to this file to use as mock data during the development and testing phase. My goal is to assign the state of the function to this object, but modified with mapping. The current st ...

javascriptreactjsreact-hooks

How to deal with an empty $_FILES array when there is file data present in $_POST

After reviewing multiple solutions, I noticed that they all utilize jQuery's .ajax() method. However, I have developed a more concise vanilla JS approach which has been quite successful for me. function ajax(options){ var settings = { met ...

javascriptphpajaxfileform-data

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Having an issue with my ion-select in Ionic version 6. I have successfully pre-selected a value when the page loads, but it doesn't show up in the UI until after clicking the select (as shown in pic 2). I'm loading the data in the ionViewWillEnt ...

javascriptangulartypescriptionic-frameworkionic6