How can I verify whether the text content is either one or two using Playwright?
await expect(this.header).toHaveText('one').or('two')Is there a way to achieve this functionality in Playwright?
Additionally, can this feature be incorporated within a sentence like:
await expect(this.header).toHaveText("this is "+('first').or('second')+ "sentence");If you want to specify an expected value using a regular expression, you can do so like this:
await expect(this.header).toHaveText(/^(apple|banana)$/);
The .toHaveText() function matches the entire text, so technically you may not need to anchor the regexp (although I haven't tested it myself, just going by what I read in the documentation for Locator.toHaveText()):
await expect(this.header).toHaveText(/apple|banana/);
In the latest Playwright update, version 1.33, a new feature called Locator.or has been introduced for enhanced functionality:
const headerOne = page.getByRole('heading', { name: 'One' });
const headerTwo = page.getByRole('heading', { name: 'Two' });
await expect(headerOne.or(headerTwo)).toBeVisible();
A different approach is to handle the OR condition directly on the Xpath level:
'//*[text()='one' or text()='two']'
Keep in mind that this solution is versatile and not tied to any specific library (selenium/cypress/protractor/playwright) or programming language (Java/C#/JavaScript/Python).
It's essentially a universal solution that can be applied anywhere.
For more insights, visit: Two conditions using OR in XPATH
There is a function below that returns a promise. public async getAverageHeadCount(queryParams: Params, childNode: any, careerTrackId: string): Promise<Metric> { const queryId = this.hierarchyServiceApiUrl + "rolling-forecast/ahc/" + q ...
Previously functioning code seems to have been affected by an update to PrimeNG. The confirmation dialog that was once usable is now hidden behind a gray click-mask, rendering everything on the screen unclickable: https://i.sstatic.net/YN7Iu.png The HTML ...
I have some experience with programming, especially in creating web apps. However, when it comes to understanding code that I read, I sometimes struggle. Recently, I came across a carousel library called Glide on Github and I couldn't fully grasp its ...
I am working with an enum export const trackingKeys = { Form: 'form', Video: 'video', } as const I also have a type that assigns a type property to each key export type TrackingPropertiesByKey = { [trackingKeys.Form]: { bar : num ...
Let's take a look at how I've set up a context provider to wrap my <App/> component: // index.ts ReactDOM.render( <ApolloProvider client={client}> <React.StrictMode> <AuthProvider> <App /> & ...
Looking to split a string into an array based on type, extracting numbers and floats. The current code is able to extract some values but not complete. var arr = "this is a string 5.86 x10‘9/l 1.90 7.00" .match(/\d+\.\d+|\d+&bsol ...
As a newcomer to angular 5, I have been working on adding an 'x' button in the top right corner of a popover. Once this 'x' is clicked, the popover should be closed. Is there a way to achieve this using ng-bootstrap popover? Below is my ...
I am currently working on a timer countdown component and have the following code: @Component({ moduleId: module.id, selector: 'time-countdown', template: `<StackLayout> <Label text="{{timeRemaining}}" ></La ...
I have encountered a situation in my application where I need to loop through an array to construct a list of <option> tags. To streamline this process, I am attempting to create a universal function. function optionValues<T, K extends keyof T> ...
I am currently working on implementing an autocomplete field that retrieves options from my component's state, which in turn fetches data from the backend. Here is a snippet of my component: export const Person: React.FC<PersonProps> = ({name, a ...
I am continuously receiving the warning message: Each child in a list should have a unique "key" prop. Even though I have assigned a key with an index number to my element, it does not appear in the HTML when inspecting via dev tools. The key values are a ...
I have a dataset that includes multiple languages and their corresponding pages. export const myData = [ { id: 1, lang: "it", items: [ { id: 1, title: "IT Page1", }, { ...
My goal is to populate the template using string interpolation. However, when I attempt to reference the variable in the template, I receive the following error: core.js:1350 ERROR TypeError: Cannot read property 'status' of undefined. HTML ...
When starting a node.js project with express, the code typically begins like this - import express = require('express') const app = express() If I want to pass the variable 'app' as a parameter in typescript, what would be the appropri ...
I've encountered an issue while attempting to implement conditional rendering. The error I'm getting is Element implicitly has an 'any' type because expression of type 'number' can't be used to index type 'types&apos ...
My current challenge involves working with a filter object derived from an OpenAPI spec. The structure of this object is illustrated below: export interface Filters { field1: string[] field2: string[] field3: boolean field4: number } My goal is to ...
After using the padEnd method to ensure equal spacing for the string and binding in the title, I noticed that the console displayed the string perfectly aligned with spaces, but the binded title appeared different. Is it possible for the title to support s ...
Trying to articulate this question is proving to be a challenge, but I'll give it my best shot. In Sharepoint, a default ListItem comes with properties like id, title, createdby, createddate, modifiedby, and modifieddate. Custom lists can have addit ...
I have a dynamic page where I need to click on a button. I tried the code below, but it is not working and not showing any alert. However, if we use the same code in the browser console, it executes and shows an alert. Can someone please suggest how to r ...
I am facing an issue with setting v-if for an element to get a boolean value from a function when the router changes the URL. Here is the code snippet for my Header component: <template> <header class="wfm-header"> <div class=" ...