chore: update lit example to use the new locators API (#6628)

Co-authored-by: Hiroshi Ogawa <[email protected]>

Author: sheremet-va

examples/lit/package.json

@@ -17,11 +17,10 @@
   },
   "devDependencies": {
     "@vitest/browser": "latest",
-    "@vitest/ui": "latest",
     "jsdom": "latest",
+    "playwright": "^1.47.2",
     "vite": "latest",
-    "vitest": "latest",
-    "webdriverio": "^8.32.2"
+    "vitest": "latest"
   },
   "stackblitz": {
     "startCommand": "npm run test:ui"

examples/lit/test/basic.test.ts

@@ -1,4 +1,5 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { page } from '@vitest/browser/context'
 
 import '../src/my-button.js'
 
@@ -7,27 +8,13 @@ describe('Button with increment', async () => {
     document.body.innerHTML = '<my-button name="World"></my-button>'
   })
 
-  it('should increment the count on each click', () => {
-    getInsideButton()?.click()
-    expect(getInsideButton()?.textContent).toContain('1')
-  })
+  it('should increment the count on each click', async () => {
+    await page.getByRole('button').click()
 
-  it('should show name props', () => {
-    getInsideButton()
-    expect(document.body.querySelector('my-button')?.shadowRoot?.innerHTML).toContain('World')
+    await expect.element(page.getByRole('button')).toHaveTextContent('2')
   })
 
-  it('should dispatch count event on button click', () => {
-    const spyClick = vi.fn()
-
-    document.querySelector('my-button')!.addEventListener('count', spyClick)
-
-    getInsideButton()?.click()
-
-    expect(spyClick).toHaveBeenCalled()
+  it('should show name props', async () => {
+    await expect.element(page.getByRole('heading')).toHaveTextContent('World')
   })
 })
-
-function getInsideButton(): HTMLElement | null | undefined {
-  return document.body.querySelector('my-button')?.shadowRoot?.querySelector('button')
-}

examples/lit/tsconfig.json

@@ -5,6 +5,7 @@
     "experimentalDecorators": true,
     "module": "node16",
     "moduleResolution": "Node16",
+    "types": ["@vitest/browser/providers/playwright"],
     "verbatimModuleSyntax": true
   }
 }

examples/lit/vite.config.ts

@@ -9,8 +9,8 @@ export default defineConfig({
     // https://lit.dev/docs/tools/testing/#testing-in-the-browser
     browser: {
       enabled: true,
-      name: 'chrome',
-      provider: 'webdriverio',
+      name: 'chromium',
+      provider: 'playwright',
     },
   },
 })

examples/workspace/packages/client/test/basic.test.tsx

@@ -15,9 +15,9 @@ test('Link changes the state when hovered', async () => {
 
   await userEvent.hover(link)
 
-  expect(link).toHaveAccessibleName('Link is hovered')
+  await expect.poll(() => link).toHaveAccessibleName('Link is hovered')
 
   await userEvent.unhover(link)
 
-  expect(link).toHaveAccessibleName('Link is normal')
+  await expect.poll(() => link).toHaveAccessibleName('Link is normal')
 })

package.json

@@ -68,6 +68,7 @@
   },
   "pnpm": {
     "overrides": {
+      "@vitest/browser": "workspace:*",
       "acorn": "8.11.3",
       "mlly": "^1.7.1",
       "rollup": "$rollup",