From f837a8e93a1775ee3477ecc090bca5ddbf7a149e Mon Sep 17 00:00:00 2001
From: Jamie Rolfs <jamie.rolfs@gmail.com>
Date: Wed, 28 Sep 2022 01:10:09 -0700
Subject: [PATCH] docs(readme): add chaining documentation

---
 README.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/README.md b/README.md
index 2ed3872..e706be7 100644
--- a/README.md
+++ b/README.md
@@ -111,6 +111,42 @@ test('my modal', async ({screen, within}) => {
 })
 ```
 
+#### Chaining
+
+> 🔖 Added in [**4.5.0**](https://github.com/testing-library/playwright-testing-library/releases/tag/v4.5.0)
+
+As an alternative to the `within(locator: Locator)` function you're familiar with from Testing Library, Playwright Testing Library also supports chaining queries together.
+
+All synchronous queries (`get*` + `query*`) return `Locator` instances are augmented with a `.within()` method (`TestingLibraryLocator`). All asynchronous queries (`find*`) return a special `LocatorPromise` that also supports `.within()`. This makes it possible to chain queries, including chaining `get*`, `query*` and `find*` interchangeably.
+
+> ⚠️ Note that including any `find*` query in the chain will make the entire chain asynchronous
+
+##### Synchronous
+
+```ts
+test('chaining synchronous queries', async ({screen}) => {
+  const locator = screen.getByRole('figure').within().findByRole('img')
+
+  expect(await locator.getAttribute('alt')).toEqual('Some image')
+})
+```
+
+##### Synchronous + Asynchronous
+
+```ts
+test('chaining synchronous queries + asynchronous queries', ({screen}) => {
+  //              ↓↓↓↓↓ including any `find*` queries makes the whole chain asynchronous
+  const locator = await screen
+    .getByTestId('modal-container') // Get "modal container" or throw (sync)
+    .within()
+    .findByRole('dialog') // Wait for modal to appear (async, until `asyncUtilTimeout`)
+    .within()
+    .getByRole('button', {name: 'Close'}) // Get close button within modal (sync)
+
+  expect(await locator.textContent()).toEqual('Close')
+})
+```
+
 #### Configuration
 
 The `Locator` query API is configured using Playwright's `use` API. See Playwright's documentation for [global](https://playwright.dev/docs/api/class-testconfig#test-config-use), [project](https://playwright.dev/docs/api/class-testproject#test-project-use), and [test](https://playwright.dev/docs/api/class-test#test-use).