Add Steps component to testing.mdx (#8096)

Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: HiDeoo <[email protected]>

src/content/docs/en/guides/testing.mdx

@@ -3,8 +3,8 @@ title: Testing
 description: An intro to testing in Astro
 i18nReady: true
 ---
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
+import { Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 Testing helps you write and maintain working Astro code. Astro supports many popular tools for unit tests, component tests, and end-to-end tests including Jest, Mocha, Jasmine, [Cypress](https://cypress.io) and [Playwright](https://playwright.dev). You can even install framework-specific testing libraries such as React Testing Library to test your UI framework components.
 
@@ -74,6 +74,7 @@ export default defineConfig({
 
 ### Create your first Cypress test
 
+<Steps>
 1. Choose a page to test. This example will test the example page `index.astro` below.
 
     ```html title="src/pages/index.astro"
@@ -104,6 +105,7 @@ export default defineConfig({
     :::tip[Set a `baseUrl`]
     You can set [`"baseUrl": "http://localhost:4321"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress) in the `cypress.config.js` configuration file to use `cy.visit("/")` instead of `cy.visit("http://localhost:4321/")` for a more convenient URL.
     :::
+</Steps>
 
 ### Running your Cypress tests
 
@@ -130,7 +132,6 @@ Once the test run is finished, you should see green check marks in the output co
 ```shell title="Output from npx cypress run"
 Running:  index.cy.js                                                                     (1 of 1)
 
-
 ✓ titles are correct (107ms)
 
 1 passing (1s)
@@ -184,6 +185,7 @@ You can install NightwatchJS within your Astro project using the package manager
 
 ### Create your first Nightwatch test
 
+<Steps>
 1. Choose a page to test. This example will test the example page `index.astro` below.
 
     ```html title="src/pages/index.astro"
@@ -215,6 +217,7 @@ You can install NightwatchJS within your Astro project using the package manager
     :::tip[Set a `baseUrl`]
     You can set [`"baseURL": "http://localhost:4321"`](https://nightwatchjs.org/guide/reference/settings.html#setting-the-baseurl-property) in the `nightwatch.conf.js` configuration file to use `browser.navigateTo("/")` instead of `browser.navigateTo("http://localhost:4321/")` for a more convenient URL.
     :::
+</Steps>
 
 ### Running your NightwatchJS tests
 
@@ -279,6 +282,7 @@ Alternatively, you can install Playwright within your Astro project using the pa
 
 ### Create your first Playwright test
 
+<Steps>
 1. Choose a page to test. This example will test the example page `index.astro` below.
 
     ```html title="src/pages/index.astro"
@@ -293,7 +297,7 @@ Alternatively, you can install Playwright within your Astro project using the pa
     </html>
     ```
 
-1. Create a new folder and add the following test file in `src/test`. Copy and paste the following test into the file to verify that the page meta information is correct. Update the value of the page `<title>` to match the page you are testing.
+2. Create a new folder and add the following test file in `src/test`. Copy and paste the following test into the file to verify that the page meta information is correct. Update the value of the page `<title>` to match the page you are testing.
 
     ```jsx title="src/test/index.spec.ts" "Astro is awesome!"
     import { test, expect } from '@playwright/test';
@@ -308,6 +312,7 @@ Alternatively, you can install Playwright within your Astro project using the pa
     :::tip[Set a `baseUrl`]
     You can set [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) in the `playwright.config.ts` configuration file to use `page.goto("/")` instead of `page.goto("http://localhost:4321/")` for a more convenient URL.
     :::
+</Steps>
 
 ### Running your Playwright tests
 
@@ -335,8 +340,10 @@ You can also have Playwright start your server when you run your testing script
 
 Here is an example of the configuration and commands required when using npm:
 
+<Steps>
 1. Add a test script to your `package.json` file in the project root, such as `"test:e2e": "playwright test"`.
-1. In `playwright.config.ts`, add the `webServer` object and update the command value to `npm run preview`.
+
+2. In `playwright.config.ts`, add the `webServer` object and update the command value to `npm run preview`.
 
     ```js title="playwright.config.ts" ins={4-9} "npm run preview"
     import { defineConfig } from '@playwright/test';
@@ -354,7 +361,8 @@ Here is an example of the configuration and commands required when using npm:
     });
     ```
 
-1. Run `npm run build`, then run `npm run test:e2e` to run the Playwright tests.
+3. Run `npm run build`, then run `npm run test:e2e` to run the Playwright tests.
+</Steps>
 
 More information about Playwright can be found in the links below: