Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Filter out getByText elements that contain "disabled" class name

Have a calendar that might have a date displayed twice: from the previous month and for the current month:

enter image description here

The disabled dates have disabled in the class, like this:

<div role="gridcell" class="ngb-dp-day disabled" tabindex="-1" aria-label="Sunday, July 28, 2024">
<span _ngcontent-dug-c147="" class="custom-day weekend disabled"> 28 </span>
<!----><!---->
</div>

The active element does not have disabled in the class name

<div role="gridcell" class="ngb-dp-day" tabindex="-1" aria-label="Wednesday, August 28, 2024">
<span _ngcontent-dug-c147="" class="custom-day"> 28 </span>
<!----><!---->
</div>

In my current implementation I am using page.getByText("28", { exact: true }).click() but it fails because there are two elements with the same text.

How can I filter out the disabled one?

I was trying to use this, but it does not exactly work

await this.page.getByText("28")
    .filter({ hasNot: this.page.locator('span[class~="disabled"]').click()
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you @graham-judd for pointing to the correct answer

    page.locator("span:not(.disabled)").getByText("28", { exact: true })

  2. 0 
    await page.locator("span.disabled").getByText("28", { exact: true }).click()
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search