Tips for choosing an HTML element using Playwright with TypeScript

My goal is to use playwright with typescript in order to select a specific html element. The element I am trying to target has the class "ivu-select-dropdown" and a specific style.

<div class="ivu-select-dropdown" style="position: absolute; min-width: 180px; will-change: top, left; transform-origin: center top; top: 135px; left: 339px;" x-placement="bottom-start">
       <ul class="ivu-select-not-found" style="display: none;">
            <li>No matching data</li>
        </ul>
        <ul class="ivu-select-dropdown-list">
            <li class="ivu-select-item">
                <div class="custom-select-item-for-preview">5Cells</div>
            </li>
            ... and other li elements

I have tried referencing the documentation but I am still unsure how to properly utilize the class "ivu-select-dropdown" for targeting this element.

The html structure of the page seems to be dynamic and it may also include the following structure before any actions are taken:

<div class="custom-autocomplete-targets ivu-select ivu-select-single ivu-select-small ivu-form-item-error">
    <div tabindex="-1" class="ivu-select-selection"><input type="hidden">
        <div class="">
            <!---->
            <!----> <span class="" style="display: none;"></span> <input type="text" placeholder="Select" autocomplete="off" spellcheck="false" class="ivu-select-input">
            <!----> <i class="ivu-icon ivu-icon-ios-arrow-down ivu-select-arrow"></i></div>
    </div>
    <div class="ivu-select-dropdown" style="display: none; position: absolute; min-width: 180px; will-change: top, left; transform-origin: center top; top: 135px; left: 339px;" x-placement="bottom-start">
        <ul class="ivu-select-not-found" style="display: none;">
            <li>No matching data</li>
        </ul>
        <ul class="ivu-select-dropdown-list">
            <li class="ivu-select-item">
                <div class="custom-select-item-for-preview">5Cells</div>
        </li>
        ... and other li elements
typescriptplaywright

Answer №1

Finding an element with specific text using CSS selectors can be challenging, but XPath makes it much simpler:

let dropDownItem = page.locator("xpath=//li[@class='ivu-select-item']/div[text()='5Cells']");
await dropDownItem.click();

If you prefer to click on the li element instead of the nested div, you can use this selector:

let dropDownItem = page.locator("xpath=//li[@class='ivu-select-item']/div[text()='5Cells']/parent::li");

You can test this with the following mock HTML structure:

<html>

<body>
  <h1>Mock</h1>
  <div class="ivu-select-dropdown" style="position: absolute; min-width: 180px; will-change: top, left; transform-origin: center top; top: 50px; left: 50px;" x-placement="bottom-start">
    <ul class="ivu-select-not-found" style="display: none;">
      <li>No matching data</li>
    </ul>
    <ul class="ivu-select-dropdown-list">
      <li class="ivu-select-item">
        <div class="custom-select-item-for-preview">3Cells</div>
      </li>
    </ul>
    <ul class="ivu-select-dropdown-list">
      <li class="ivu-select-item">
        <div class="custom-select-item-for-preview">5Cells</div>
      </li>
    </ul>
  </div>
</body>

</html>

Answer №2

Hey there Alex!

Give this a try:</p>

If you open up your browser and use the devtools, you can easily change the index to access different elements:

(//li[@class='ivu-select-item'])[1]

or

(//li[@class='ivu-select-item'])[2]

and so on...

(//li[@class='ivu-select-item'])[X]

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

Removing a value from an array of objects in Angular 2

There is a single array that holds objects: one = [ {name: 'Name', key: '4868466'}, {name: 'Name', key: '4868466'}, {name: 'Name', key: '4868466'}, {name: 'Name', key: & ...

javascriptangulartypescript

Error: Interface declaration for _.split is missing in the Lodash.d.ts file

For my current typescript project that heavily relies on Lodash with lodash.d.ts, I've encountered an issue with the _.split function not being implemented yet. It's listed under the 'Later' section in the .ts file. I need to find a wo ...

javascripttypescriptlodash

What kind of impact on performance can be expected when using index.ts in a Typescript - Ionic App?

When setting up the structure of a standard Ionic app, it typically looks like this: app pages ----page1 ---------page1.ts ----page2 ---------page2.ts If I were to include an index.ts file in the pages folder as follows: pages/index.ts export { Page1 } ...

angulartypescriptimportmoduleionic2

When using html2canvas in Angular, it is not possible to call an expression that does not have a call signature

I'm currently working on integrating the html2canvas library into an Angular 8 project. Despite trying to install the html2canvas types using npm install --save @types/html2canvas, I'm still facing issues with its functionality. Here's how ...

angulartypescripttypeshtml2canvas

Filtering JSON array data in Typescript can help streamline and optimize data

Recently diving into Angular, I am facing a challenge with filtering data from a JSON array. My goal is to display names of items whose id is less than 100. The code snippet below, however, is not producing the desired result. list : any; getOptionList(){ ...

jsonangulartypescriptfilterobservable

Start incrementing from the value of x

I'm trying to create an incremental column in Node.js with TypeORM, similar to this: @Column() @Generated('increment') public orderNumber: number; Is there a method to set TypeORM to begin counting from 9000 instead of the default starting ...

node.jstypescripttypeorm

What steps do I need to take to export my TypeScript declarations to an NPM package?

I have multiple repositories that share similar functionality. I want to export type declarations to an NPM package so I can easily install and use them in my projects. Within the root directory, there is a folder called /declarations, containing several ...

typescripttypescript-typingsnpm-publish

Clarifying the concept of invoking generic methods in TypeScript

I'm currently working on creating a versatile method that will execute a function on a list of instances: private exec<Method extends keyof Klass>( method: Method, ...params: Parameters<Klass[Method]> ) { th ...

typescriptgenerics

Snapshots testing app Expo TypeScript Tabs App.tsx

After setting up an Expo project with Typescript and Tabs, I decided to add unit testing using Jest but ran into some issues. If you want to create a similar setup, check out the instructions here: . Make sure to choose the Typescript with Tabs option whe ...

typescriptreact-nativejestjsexpo

Tips for successfully passing the dynamic state and setState to a function in typescript

I'm encountering an issue with passing dynamic state and setState into a function using Typescript. Despite trying to use Generics, I am facing complaints from Typescript. Here is the code snippet: const handleSelectTag = (tag: { color: string; labe ...

reactjstypescriptreact-typescript

Discovering the parameter unions in Typescript has revolutionized the way

My current interface features overloaded functions in a specific format: export interface IEvents { method(): boolean; on(name: 'eventName1', listener: (obj: SomeType) => void): void; on(name: 'eventName2', listener: (obj: Som ...

javascripttypescripttypescript-typings

Implement the click event binding using classes in Angular 2

If I have the template below, how can I use TypeScript to bind a click event by class? My goal is to retrieve attributes of the clicked element. <ul> <li id="1" class="selectModal">First</li> <li id="2" class="selectModal">Seco ...

javascripttypescriptangular

Having trouble using the 'in' operator to search for 'Symbol(StrapiCustomCoreController)' while transitioning Strapi to TypeScript

I'm in the process of converting my strapi project to typescript. I've updated all strapi packages to version 4.15.5 and converted the files to ts extension. However, upon running strapi develop, I encounter the following error: [2024-01-03 10:50 ...

typescriptstrapi

Tips for converting text input in a textbox to a Date value

My knowledge of Angular is limited, and we are currently using Angular 10. In our application, there is a textbox where users need to input a date in the format 10202020. This value should then be reformatted as 10/20/2020 and displayed back in the same ...

angulartypescriptangular10

Inadequate data being sent to the server from Angular2 post request

Currently, I have a form field whose value I am passing to a service as this.form.value. However, when I log this.form.value on the console, I see Object { email: "zxzx", password: "zxzxx" }. Despite this, when I send the same data to the service and make ...

javascripttypescriptangular

Unable to find the locally stored directory in the device's file system using Nativescript file-system

While working on creating an audio file, everything seems to be running smoothly as the recording indicator shows no errors. However, once the app generates the directory, I am unable to locate it in the local storage. The code I am using is: var audioFo ...

javascripttypescriptnativescript

Utilizing class attributes within multiple classes

I have created a custom class called MutationValidator as follows: const ERR_MSG = 'Error1'; @Service() export class MutationValidator { .. } This class is used in another class like so: import { MutationValidator } from './mutation ...

javascriptnode.jstypescript

How can you notify a component, via a service, that an event has occurred using Subject or BehaviorSubject?

For my Angular 10 application, I created a service to facilitate communication between components: export class CommunicationService { private messageSubject = new Subject<Message>(); sendMessage(code: MessageCode, data?: any) { this.messag ...

angulartypescriptrxjsangular10

Step-by-step guide on building a wrapper child component for a React navigator

When using the Tab.Navigator component, it is important to note that only the Tab.Screen component can be a direct child component. Is there a way in Typescript to convert or cast the Tab.Screen Type to the TabButton function? const App = () => { retur ...

typescriptreact-native

Angular 5 with Typescript encountered a failure in webpack due to the absence of the property "data" on the Response

I am encountering an issue during webpack compilation. It compiles successfully if I remove .data, but then the page crashes with calls from template->component (which in turn calls a service). Here is the error I am facing: ERROR in src/app/components ...

javascriptangulartypescriptobservableangular-httpclient