docs(test-advanced.md): Overriding fixtures (#7528)

docs/src/test-fixtures.md

@@ -335,3 +335,63 @@ const test = base.extend<{}, ExpressWorkerFixtures>({
 
 export default test;
 ```
+
+## Overriding fixtures
+
+In addition to creating your own fixtures, you can also override existing fixtures to fit your needs. Consider the following example which overrides the `page` fixture by navigating to a specified URL:
+
+```js js-flavor=js
+const base = require('@playwright/test');
+
+exports.test = base.test.extend({
+  page: async ({ baseURL, page }, use) => {
+    await page.goto(baseURL);
+    await use(page);
+  },
+});
+```
+
+```js js-flavor=ts
+import { test as base } from '@playwright/test';
+
+export const test = base.extend({
+  page: async ({ baseURL, page }, use) => {
+    await page.goto(baseURL);
+    await use(page);
+  },
+});
+```
+
+Notice that in this example, the `page` fixture is able to depend on other built in fixtures such as `baseURL`. This allows us to override the `baseURL` used by the `page` fixture in our tests using `test.use`.
+
+```js js-flavor=js
+test.use({ baseURL: 'https://playwright.dev' })
+```
+
+```js js-flavor=ts
+test.use({ baseURL: 'https://playwright.dev' })
+```
+
+Fixtures can also be overridden where the base fixture is completely replaced with something different. For example, we could override the `storageState` fixture to provide our own data.
+
+```js js-flavor=js
+const base = require('@playwright/test');
+
+exports.test = base.test.extend({
+  storageState: async ({}, use) => {
+    const cookie = await getAuthCookie();
+    await use({ cookies: [cookie] });
+  },
+});
+```
+
+```js js-flavor=ts
+import { test as base } from '@playwright/test';
+
+export const test = base.extend({
+  storageState: async ({}, use) => {
+    const cookie = await getAuthCookie();
+    await use({ cookies: [cookie] });
+  },
+});
+```