arrow-left Back to topicQuizMigrating from Testing LibraryCheck yourself1.In React Testing Library you use await screen.findByText('Welcome') to wait for async text to appear. What's the direct Playwright equivalent?await page.waitForSelector('text=Welcome') — explicit wait neededawait expect(page.getByText('Welcome')).toBeVisible() — Playwright assertions auto-wait, no findBy/getBy/queryBy distinction neededpage.getByText('Welcome') — locators auto-wait by themselves when calledawait page.findByText('Welcome') — Playwright has a findBy equivalent2.In Testing Library, within(orderRow).getByRole('button', { name: 'Cancel' }) scopes a query to inside an element. What's the Playwright equivalent?page.within(orderRow).getByRole('button', { name: 'Cancel' })orderRow.getByRole('button', { name: 'Cancel' }) — Playwright locators are chainable, every method on a locator searches within itpage.getByRole('button', { name: 'Cancel', within: orderRow })page.locator('button[name=Cancel]').inside(orderRow)3.Testing Library's render(<SignInForm />) is synchronous. What's the key difference when using Playwright Component Testing's mount()?mount() requires a cleanup call — Playwright doesn't auto-unmount like Testing Librarymount() is async — you must await it; it returns a locator scoped to the mounted componentmount() requires explicit props serialization before passing to the componentmount() only works for functional components, not class components4.Testing Library uses await waitForElementToBeRemoved(() => queryByText('Loading...')). What's the Playwright equivalent?await page.waitForSelector('text=Loading...', { state: 'detached' })await expect(page.getByText('Loading...')).toBeHidden() — the assertion auto-waits for the element to disappearawait page.evaluate(() => !document.querySelector('text=Loading...'))await expect.poll(() => page.getByText('Loading...').count()).toBe(0)5.Testing Library uses await user.type(emailInput, 'john@example.com'). What's the equivalent in Playwright?await page.keyboard.type('john@example.com') — Playwright uses the keyboard APIawait locator.fill('john@example.com') — clears the field and types the valueawait locator.pressSequentially('john@example.com') — the user.type equivalentawait locator.setValue('john@example.com') — the direct value setter6.Testing Library: expect(el).toBeInTheDocument(). What's the Playwright equivalent for checking an element is present and visible?await expect(locator).toBeAttached() — checks the element is in the DOMawait expect(locator).toBeVisible() — checks the element is present and visible to the userawait expect(locator).not.toBeHidden() — the logical inverseexpect(await locator.count()).toBeGreaterThan(0) — count-based existence check7.Testing Library uses const { rerender } = render(<Counter count={1} />) and then rerender(<Counter count={2} />). What's the Playwright component testing equivalent for re-rendering with new props?Unmount and mount again with new propsconst component = await mount(...); await component.update(<Counter count={2} />) — update() re-renders with new propsawait mount(<Counter count={2} />) again — mount() replaces the previous componentcomponent.setProps({ count: 2 }) — direct prop setter8.Your RTL test uses expect(button).toBeDisabled(). What's the direct Playwright assertion?await expect(locator).toHaveAttribute('disabled')await expect(locator).toBeDisabled() — Playwright has the same assertion nameawait expect(locator).not.toBeEnabled()expect(await locator.evaluate(el => el.disabled)).toBe(true)Submit answersarrow-left PreviousBest Practices