Ways to locate an element using the OR operator in the locator

Testing 2 very similar elements on different pages:

<input name="myName">
<input name="name">

My attempt to locate the input element using Or (||) keyword was unsuccessful.

Is it possible to achieve this without xpath, solely by implementing a CSS expression?

this._nameInput = page.locator(
    'input[name="name"]' || 'input[name*="Name"]'
)

Answer №1

To simplify your code, you have the option to utilize the or method:

firstInput = page.locator('input[name="name"]')
secondInput = page.locator('input[name*="Name"]');
this._nameField = firstInput.or(secondInput);

Answer №2

To achieve this using solely CSS, you could employ a comma as a separator:

let nameInput = document.querySelector('input[name="name"], input[name*="Name"]')

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 securely accessing a parameterized property of an object in Typescript

I need to create a function that takes an object as an argument and accesses a specific property of this object based on another parameter. Here is the code snippet: // javascript code function setProperty(subject, property, value) { subject[property] ...

It only takes half a minute for ts-node-dev to set up its watchers

Having tried both ts-node and ts-node-dev, I am frustrated by the fact that they take almost the same amount of time to start my app server. This issue has been a recurring problem for me, with no successful attempts at resolving it. Currently, I am opera ...

Extracting the "defined" type from a TypeScript property during runtime

My current task Presently, I am iterating through the keys of an object and transferring their values to another object. interface From { [key: string]: string; } let from: From = { prop1: "foo", prop2: "23", }; interface To { [key: str ...

How can we prevent new chips (primeng) from being added, but still allow them to be deleted in Angular 2?

Hey there! I'm currently exploring how to make the chips input non-editable. I am fetching data objects from one component and using the keys of those objects as labels for the chips. Check out my HTML code below: <div class="inputDiv" *ngFor="le ...

Ensure that Angular resolver holds off until all images are loaded

Is there a way to make the resolver wait for images from the API before displaying the page in Angular? Currently, it displays the page first and then attempts to retrieve the post images. @Injectable() export class DataResolverService implements Resolv ...

How can TypeScript be used to enable CSV or PDF export in a material-react-table?

Is it possible to incorporate the ability to export data to CSV or PDF in a material-react-table? While I am familiar with how to do this with a Material UI table, I have not been able to find the same functionality for the material-react-table. Thank you ...

express-validator not providing any feedback from endpoint when integrated with TypeScript

I've been working on validating the response body for my endpoint, but I'm running into an issue where I'm not getting a response from that endpoint when using express-validator. I'm confident that I have followed the official documenta ...

Specify the return type based on specific parameter value

I'm facing a situation where I have two definitions that are identical, but I need them to behave differently based on the value of the limit parameter. Specifically, I want the first definition to return Promise<Cursor<T>> when limit is g ...

Errors related to Typescript are causing issues with the stock installation of Next.js

Whenever I use typescript with create-next-app, my tsx files are filled with numerous "Problems" messages. These errors only appear in Visual Studio Code and do not affect the build process. I have tried uninstalling vscode, removing all extensions, and ...

Generate an array of objects by combining three separate arrays of objects

There are 3 private methods in my Angular component that return arrays of objects. I want to combine these arrays into one array containing all the objects, as they all have the same class. Here is the object structure: export class TimelineItemDto { ...

Discovering the file system with window.resolveLocalFileSystemURL in Typescript for Ionic 3

After reviewing the documentation found on this link for the File plugin, I came across a paragraph that discusses how to add data to a log file. See the example code below: window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function (dirEntry) ...

Navigating to an external link directing to an Angular 5 application will automatically land on

I am struggling to comprehend why a link from an external source to my Angular app keeps redirecting to the default route page when accessed from a browser. The scenario involves a user entering an email address, triggering an API that sends an email cont ...

The function Event.target.value is coming back as null

I've been working on creating a timer window, and I've set up a separate component for it. However, I'm facing an issue with passing the time from the main component to the child component. The problem lies in the fact that the state of the ...

Is the neglected property being discarded?

First things first, let's talk about my class: class FavoriteFooBar { ... isPreferred: boolean = false; constructor() { this.isPreferred = false; } } Using a utility library called Uniquer, I arrange a list of FavoriteFooBar instances to pr ...

Provide a TypeScript interface that dynamically adjusts according to the inputs of the function

Here is a TypeScript interface that I am working with: interface MyInterface { property1?: string; property2?: string; }; type InterfaceKey = keyof MyInterface; The following code snippet demonstrates how an object is created based on the MyInter ...

The component 'Form' cannot be utilized in JSX because its return type, 'ReactNode', is not a valid JSX element

I'm facing an issue with my Next.js application written in TypeScript after updating react-bootstrap. After the update, I am encountering the following error when attempting to use the Form component from react-bootstrap: react-bootstrap: ^2.10.3 @typ ...

Interacting Between Module Components in Angular 2

I have a situation where I have one component that needs to pass data to another component located in a different module. The app.component acts as the parent of these child modules. However, they are only connected through routing, so they are not technic ...

Is there possibly a problem with GridActionsCellItem and its props?

I'm encountering a problem with passing props into the GridActionsCellItem within the '@mui/x-data-grid'; columns; { field: 'actions', type: 'actions', width: 80, getActions: (params: any) =&g ...

A guide on implementing JSON data projection with TypeScript

{ "ClaimType": ["The 'Claim Type' should have a minimum length of 4 characters. You have only entered 2 characters."], "ClaimValue": ["The 'Claim Value' should have a minimum length of 4 characters. You have only entered 1 chara ...

The confirm alert from Material UI is being obscured by the dialog

How can I ensure that a material ui dialog does not hide the alert behind it when confirming an action? Is there a way to adjust the z index of the alert so that it appears in front of the dialog? import Dialog from "@material-ui/core/Dialog"; i ...