diff --git a/src/content/docs/en/guides/testing.mdx b/src/content/docs/en/guides/testing.mdx index 0f64779206438..91b483ab9087d 100644 --- a/src/content/docs/en/guides/testing.mdx +++ b/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 + 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. ::: + ### 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 + 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. ::: + ### 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 + 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 ``` -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 `` 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: