test(fixture): add coverage for auto-waiting with queryBy

Author: jrolfs

test/fixture/locators.test.ts

@@ -214,6 +214,15 @@ test.describe('lib/fixture.ts (locators)', () => {
       expect(await locator.textContent()).toEqual('Loaded!')
     })
 
+    test("queryBy* methods can be used with Playwright's laziness", async ({screen, within}) => {
+      const modalLocator = await screen.findByRole('dialog', undefined, {timeout: 3000})
+
+      await expect(modalLocator).toHaveText(/My Modal/)
+      await within(modalLocator).getByRole('button', {name: 'Okay'}).click()
+
+      await expect(screen.queryByRole('dialog')).toBeHidden()
+    })
+
     test('should handle the findAllBy* methods', async ({queries}) => {
       const locator = await queries.findAllByText(/Hello/, undefined, {timeout: 3000})
 

test/fixtures/late-page.html

@@ -25,6 +25,25 @@
         attached.textContent = 'Attached'
         attached.style.visibility = 'hidden'
         document.body.appendChild(attached)
+
+        const modal = document.createElement('dialog')
+        const modalButton = document.createElement('button')
+        const modalHeader = document.createElement('h1')
+
+        modal.style.display = 'block'
+
+        modalButton.innerText = 'Okay'
+        modalButton.onclick = () => {
+          modal.innerText = 'Doing a thing...'
+          setTimeout(() => document.querySelector('dialog').remove(), 1000)
+        }
+
+        modalHeader.innerText = 'My Modal'
+
+        modal.appendChild(modalButton)
+        modal.appendChild(modalHeader)
+
+        document.body.appendChild(modal)
       }, 2000)
     </script>
   </body>