Playwright Integration

[KonnorRogers]

I don't know if this discussion will lead to anything, but my general thought currently as im working through adding E2E tests to Web Awesome and documenting selectors that are "broken" or require workarounds.

Waiting for elements to load

Currently, I add a waitForComponentsToLoad() script, which waits for all components to be :defined + updateComplete

// Get typescript working
declare module "playwright" {
  interface Page {
    waitForComponentsLoaded: () => Promise<void>
  }
}

    const browser = await chromium.launch({ headless: false }); // Set headless: false to see the UI

    // Create a new browser context
    const context = await browser.newContext({
      baseURL: "http://localhost:3060"
    });


    // Create a new page within the context
    const page = await context.newPage();

    page.waitForComponentsLoaded = async () => {
      await page.evaluate(async () => {
        const undefinedEls: any[] = []
        // @ts-expect-error
        const tagNames = [...document.querySelectorAll(":not(:defined)")].map((el) => {
          undefinedEls.push(el)
          return el.localName
        })

        const tagNamesSet = new Set([...tagNames])

        // @ts-expect-error
        await Promise.allSettled([...tagNamesSet.values()].map((tagName) => window.customElements.whenDefined(tagName)))
        await Promise.allSettled(undefinedEls.map((el) => el.updateComplete))
      })
    }

And then in my tests:

await page.goto("/")
await page.waitForComponentsLoaded

Specific Elements

• <wa-input> -> seems to work as expected with await page.getByRole("textbox", { name: /Name/i }).fill("Konnor")
• <wa-checkbox> -> can properly locate with page.getByRole("checkbox", { name: /I agree/i }) , but is not able to .checked() or .click(), instead, need to do: await page.getByRole("checkbox", { name: /I agree/i }).dispatchEvent("click")

(Will be adding more as more things get tested and quirks are discovered)

[erdalkaraca]

I also started adding E2E tests to this open source project eclipse-docks which heavily relies on Lit/WebAwesome:

https://github.com/eclipse-docks/core/blob/main/packages/app-e2e/e2e/workspace-indexeddb-persist.spec.ts

It seems playwright can nicely interact with the (shadow) DOM.