CODEWITHSUNDEEP
javascriptplaywright
corporate chris
corporate chris

Reputation: 89

playwright click a button inside a dropdown

here is the html of the object:

<div class="filter-component filter-component-1">
   <p class="usa-accordion__heading">
     <button aria-selected="false" class="filtered assignment usa-accordion__button filter-dropdown ds-c-button ds-u-padding-left--1 ds-u-padding-right--4 ds-u-padding-y--1" aria-expanded="false" aria-controls="a1">
       <span>Medicare-approved payment: Full Payment </span>
       <div class="filter-arrow down"></div>
     </button>
   </p>
</div>

my goal is to grab the div with the class filter-component-1 and store it in a variable to then

1 click that div 2 click the button in that div

I feel like i need to do something like

A NOTE: I have altered how we structure these tests so that they run in aws lambda. The normal sytax of test('test description') etc does not work here. Hence the awaits. Please just focus on the playwright syntax line by line.

let dropdowndiv = await this.page.waitForSelector(".filter-component-1");

but then what?

sorry im very new to playwright and the docs are pretty much useless =( https://playwright.dev/java/docs/selectors#selecting-elements-that-contain-other-elements

Upvotes: 5

Views: 8274

Answers (1)

senaid
senaid

Reputation: 650

You dont have to select anything just do as You planned:

Click on dropdown: await page.click(".filter-component-1")

Then Click on button await page.click("button")

(Note that this button must be unique on that page, if its not you can add another selector to make it more specific)

If You really want to store that div then:

let dropdowndiv = await this.page.locator(".filter-component-1");

await dropdowndiv.click()

You can use this locator to select button inside it:

await dropdowndiv.locator("button").click()

Upvotes: 4

Related Questions