playwright click a button inside a dropdown

user_17441865 0
Viewed 1624

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

playwright javascript
1 Answers

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()

user_144619890
Related