search

microsoft / playwright

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
https://playwright.dev
Apache License 2.0
66.05k stars 3.6k forks source link

[BUG] `toContainText` assertion does not consider text in Web Component slots #19473

Closed geigerzaehler closed 1 month ago

geigerzaehler commented 1 year ago

The toContainText assertion does not consider text that is injected via a slot into the subtree of element targeted by the locator. In the following example, the assertion expect(page.getByRole('button', { name: 'foo' })).toContainText('foo') fails.

<!DOCTYPE html>

<html>
  <body>
    <template name="my-btn">
      <button>
        <slot></slot>
      </button>
    </template>

    <script type="module">
      class MyBtn extends HTMLElement {
        constructor() {
          super()
          let content = document.querySelector('template[name="my-btn"]').content.cloneNode(true)
          let shadowRoot = this.attachShadow({ mode: 'open' })
          shadowRoot.append(content)
        }
      }

      customElements.define('my-btn', MyBtn)
    </script>

    <my-btn>foo</my-btn>
  </body>
</html>

I discovered this while testing the fix for https://github.com/microsoft/playwright/issues/18989 so this uses a pre-release version.

Context:

dgozman commented 1 year ago

@geigerzaehler This is indeed the case, thank you for the issue.

Vivek-Kini commented 1 year ago

I'm waiting for this issue to be fixed to upgrade (currently on 1.25.2). I'm excited but can't move to 1.31.x .. can this issue be prioritised. Most of our tests are effected we upgrade is made.. !!

dgozman commented 1 year ago

@Vivek-Kini We haven't seen much interest in this change so far. Considering it is potentially breaking for existing users, we are not going forward with it for now. I'd recommend to work around for now, targeting some inner element inside the Web Component for your assertions.

nlepage commented 1 year ago

Hello, we are facing a similar issue in one of our projects, with a custom element using the following template:

<template>
  <div>
    <p role="alert">
      <slot></slot>
    </p>
  </div>
</template>

And we are unable to use the following assertion in our tests:

await expect(page.getByRole('alert').filter({ hasText: 'Some text' })).toBeVisible();

+1 for this issue being fixed !

pavelfeldman commented 1 month ago

Why was this issue closed?

Thank you for your contribution to our project. This issue has been closed due to its limited upvotes and recent activity, and insufficient feedback for us to effectively act upon. Our priority is to focus on bugs that reflect higher user engagement and have actionable feedback, to ensure our bug database stays manageable.

Should you feel this closure was in error, please create a new issue and reference this one. We're open to revisiting it given increased support or additional clarity. Your understanding and cooperation are greatly appreciated.