i18n(zh-cn): Add testing.mdx (#2293)

withastro · Jan 5, 2023 · d65c9ff · d65c9ff
1 parent e1b362b
commit d65c9ff
Showing 1 changed file with 122 additions and 0 deletions.
diff --git a/src/pages/zh-cn/guides/testing.mdx b/src/pages/zh-cn/guides/testing.mdx
@@ -0,0 +1,122 @@
+---
+layout: ~/layouts/MainLayout.astro
+title: 测试
+description: Astro 测试介绍
+i18nReady: false
+---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+
+
+测试可以帮助你编写和维护工作的 Astro 代码。Astro 支持许多流行的单元测试、组件测试和端到端测试工具，包括 Jest、 Mocha、 Jasmine、 Cypress 和 Playwright。你甚至可以安装特定于框架的测试库，例如 React Test Library，以测试你的 UI 框架组件。
+
+测试框架允许你声明关于代码在特定情况下应该如何行为的 **断言(assertions)** 或 **期望(expectations)**，然后将这些断言或期望与当前代码的实际行为进行比较。
+
+## Playwright
+
+Playwright 是一个针对现代网络应用的端到端测试框架。使用 JavaScript 或 TypeScript 中的 Playwright API 在所有现代渲染引擎(包括 Chromium、 WebKit 和 Firefox)上测试 Astro 代码。
+
+### 安装
+
+你可以使用 [VS 代码扩展](https://playwright.dev/docs/getting-started-vscode) 开始并运行你的测试。
+
+或者，你可以使用你选择的包管理器在你的 Astro 项目中安装 Playwright。按照 CLI 步骤选择 Javascript/Type 脚本，命名测试文件夹，并添加一个可选的 Github Actions 工作流。
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npm init playwright@latest
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm dlx create-playwright
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn create playwright
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+### 创建那你的第一个 Playwright 测试
+
+1. 选择要测试的页面，我们将使用下面的 `index.astro` 页面为例。
+
+```html title="src/pages/index.astro"
+---
+---
+<html lang="en">
+  <head>
+    <title>Astro is awesome!</title>
+    <meta name='description' content="Pull content from anywhere and serve it fast with Astro's next-gen island architecture." />
+  </head>
+  <body></body>
+</html>
+```
+
+2. 创建一个新文件夹并在 `src/test` 中添加以下测试文件。将下面的测试复制并粘贴到文件中，以验证页面元信息是否正确。更新页面 `<title>` 的值以匹配你正在测试的页面。
+
+```jsx title="src/test/index.spec.ts" "Astro is awesome!"
+test('meta is correct', async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+
+  await expect(page).toHaveTitle('Astro is awesome!');
+});
+```
+
+:::tip[设置默认网址]
+你可以在 `playwright.config.ts` 配置文件中配置 `"baseURL": "http://localhost:3000"` 可以使用 `page.goto("/")` 来替代 `page.goto("http://localhost:3000/")` 进行更方便的设置。
+:::
+
+### 运行你的 Playwright 测试
+
+你可以同时运行单个测试或多个测试，测试一个或多个浏览器。默认情况下，你的测试结果将显示在终端中。或者，你可以打开 HTML Test Reporter 以显示完整的报告和筛选测试结果。
+
+1. 若要使用命令行运行上面的测试示例，请使用 `test` 命令。可以选择，包含只运行单个测试的文件名:
+
+```sh
+npx playwright test index.spec.ts
+```
+
+2. 若要查看完整的 HTML 测试报告，请使用以下命令打开该报告:
+```sh
+npx playwright show-report
+```
+
+:::tip
+针对生产代码运行测试，以更接近于实时部署的站点。
+:::
+
+#### 进阶： 在测试期间启动开发 Web 服务器
+
+当你使用 Playwright 配置文件中的 [`webServer`](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests) 选项运行测试脚本时，你也可以让 Playwright 启动服务器。
+
+下面是使用 Yarn 时所需的配置和命令示例：
+
+1. 向项目根目录中的 package.json 文件添加一个测试脚本，例如 `"test:e2e": "playwright test"`。
+
+2. 在 `playwright.config.ts` 中，添加 `webServer` 对象并更改命令为 `yarn preview`。
+
+```js title="playwright.config.ts" ins={3-8} "yarn preview"
+import type { PlaywrightTestConfig } from '@playwright/test';
+const config: PlaywrightTestConfig = {
+  webServer: {
+    command: 'yarn preview',
+    url: 'http://localhost:3000/app/',
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
+  use: {
+    baseURL: 'http://localhost:3000/app/',
+  },
+};
+export default config;
+```
+
+3. 执行 `yarn build`，然后执行 `yarn test:e2e` 运行 `Playwright` 测试。
+
+以下链接有更多关于 Playwright 的资料：
+
+- [Playwright 入门指南](https://playwright.dev/docs/intro)
+- [使用开发服务器](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests)