我一直喜歡觀看我的單元測試運(yùn)行（并通過）。它們速度很快，并且通過測試讓我確信我的個(gè)人作品表現(xiàn)得像他們應(yīng)該的那樣。相反，我經(jīng)常很難確定瀏覽器端到端測試的優(yōu)先級(jí)，因?yàn)榫帉懞瓦\(yùn)行它們的速度非常慢。

幸運(yùn)的是，多年來，用于端到端瀏覽器內(nèi)測試的工具已經(jīng)變得更好更快。通過無頭瀏覽器設(shè)置，我可以運(yùn)行瀏覽器測試作為 CI 的一部分。

最近，我看到這篇 Heroku 博客文章，討論在 Heroku CI 中使用無頭 Chrome 進(jìn)行自動(dòng)化瀏覽器內(nèi)測試。 Heroku 有一個(gè)安裝 headless Chrome 的構(gòu)建包，您可以在 CI 管道中調(diào)用它來進(jìn)行測試。

博客文章中的示例設(shè)置是使用 Puppeteer 和 Jest 測試的 React 應(yīng)用程序。這是一個(gè)很好的開始……但是如果我使用 Playwright 而不是 Puppeteer 呢？可以嗎？

我決定調(diào)查一下。事實(shí)證明?—?是的，您也可以使用 Playwright 來做到這一點(diǎn)！因此，我捕獲了在 Heroku CI 中使用的無頭 Chrome 瀏覽器上運(yùn)行 Playwright 測試所需的步驟。在這篇文章中，我將引導(dǎo)您完成設(shè)置步驟。

關(guān)于端到端測試的瀏覽器自動(dòng)化的簡短介紹

端到端測試捕獲用戶如何在瀏覽器中實(shí)際與您的應(yīng)用交互，從而驗(yàn)證完整的工作流程。 Playwright 通過在 Chrome、Firefox 和 Safari 中進(jìn)行測試，使這一過程變得非常無縫。當(dāng)然，在 CI 中運(yùn)行完整的瀏覽器測試非常繁重，這就是無頭模式有幫助的原因。

Heroku 的用于測試的 Chrome 構(gòu)建包將 Chrome 安裝在 Heroku 應(yīng)用程序上，因此您可以通過非常輕量級(jí)的設(shè)置在 Heroku CI 中運(yùn)行 Playwright 測試。

測試申請(qǐng)簡介

因?yàn)槲抑皇菄L試這個(gè)，所以我分叉了最初在 Heroku 博客文章中引用的 GitHub 存儲(chǔ)庫。該應(yīng)用程序是一個(gè)簡單的 React 應(yīng)用程序，帶有鏈接、文本輸入和提交按鈕。共有三個(gè)測試：

1. 驗(yàn)證鏈接是否有效并重定向到正確的位置。

2. 驗(yàn)證文本輸入是否正確顯示用戶輸入。

3. 驗(yàn)證提交表單是否會(huì)更新頁面上顯示的文本。

非常簡單。現(xiàn)在，我只需更改代碼以使用 Playwright 而不是 Puppeteer 和 Jest。哦，我還想使用 pnpm 而不是 npm。這是我分叉的 GitHub 存儲(chǔ)庫的鏈接。

修改代碼以使用 Playwright

讓我們看看我修改代碼的步驟。我從我的分叉存儲(chǔ)庫開始，與 heroku-examples 存儲(chǔ)庫相同。

使用pnpm

我想使用 pnpm 而不是 npm。 （個(gè)人喜好。）所以，這就是我首先做的：

~/project$ corepack enable pnpm


~/project$ corepack use pnpm@latest

Installing pnpm@9.12.3 in the project…
…
Progress: resolved 1444, reused 1441, downloaded 2, added 1444, done
…
Done in 14.4s

~/project$ rm package-lock.json


~/project$ pnpm install # just to show everything's good


Lockfile is up to date, resolution step is skipped
Already up to date
Done in 1.3s

將劇作家添加到項(xiàng)目中

接下來，我刪除了 Puppeteer 和 Jest，并添加了 Playwright。

~/project$ pnpm remove \
           babel-jest jest jest-puppeteer @testing-library/jest-dom

~/project$ $ pnpm create playwright
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
? Do you want to use TypeScript or JavaScript? · JavaScript
? Where to put your end-to-end tests? · tests
? Add a GitHub Actions workflow? (y/N) · false
? Install Playwright browsers (can be done manually via 'pnpm exec playwright install')? (Y/n) · false
? Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo pnpm exec playwright install-deps')? (y/N) · false

Installing Playwright Test (pnpm add --save-dev @playwright/test)…
…
Installing Types (pnpm add --save-dev @types/node)…
…
Done in 2.7s
Writing playwright.config.js.
Writing tests/example.spec.js.
Writing tests-examples/demo-todo-app.spec.js.
Writing package.json.

我還從 package.json 中刪除了 Jest 配置部分。

將 Playwright 配置為僅使用 Chromium

您可以在 Chrome、Firefox 和 Safari 中運(yùn)行 Playwright 測試。由于我專注于 Chrome，因此我從生成的 playwright.config.js 文件的項(xiàng)目部分中刪除了其他瀏覽器：

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

//    {
//      name: 'firefox',
//      use: { ...devices['Desktop Firefox'] },
//    },
//
//    {
//      name: 'webkit',
//      use: { ...devices['Desktop Safari'] },
//    },


  ],
…

將 Puppeteer 測試代碼交換為 Playwright 測試代碼

原始代碼有一個(gè) Puppeteer 測試文件，位于 src/tests/puppeteer.test.js。我將該文件移至tests/playwright.spec.js。然后，我更新了測試以使用劇作家的約定，它映射得相當(dāng)干凈。新的測試文件如下所示：

const ROOT_URL = 'http://localhost:8080';
const { test, expect } = require('@playwright/test');

const inputSelector = 'input[name="name"]';
const submitButtonSelector = 'button[type="submit"]';
const greetingSelector = 'h5#greeting';
const name = 'John Doe';

test.beforeEach(async ({ page }) => {
  await page.goto(ROOT_URL);
});

test.describe('Playwright link', () => {
  test('should navigate to Playwright documentation page', async ({ page }) => {
    await page.click('a[href="https://playwright.dev/"]');
    await expect(page.title()).resolves.toMatch('| Playwright');
  });
});

test.describe('Text input', () => {
  test('should display the entered text in the text input', async ({ page }) => {
    await page.fill(inputSelector, name);

    // Verify the input value
    const inputValue = await page.inputValue(inputSelector);
    expect(inputValue).toBe(name);
  });
});

test.describe('Form submission', () => {
  test('should display the "Hello, X" message after form submission', async ({ page }) => {
    const expectedGreeting = `Hello, ${name}.`;
    await page.fill(inputSelector, name);
    await page.click(submitButtonSelector);

    await page.waitForSelector(greetingSelector);
    const greetingText = await page.textContent(greetingSelector);
    expect(greetingText).toBe(expectedGreeting);
  });
});

刪除 start-server-and-test，改用 Playwright 的 webServer

為了測試我的 React 應(yīng)用程序，我需要首先在一個(gè)單獨(dú)的進(jìn)程中啟動(dòng)它（在 http://localhost:8080），然后我可以運(yùn)行我的測試。無論我使用 Puppeteer 還是 Playwright，都會(huì)出現(xiàn)這種情況。對(duì)于 Puppeteer，Heroku 示例使用了 start-server-and-test 包。但是，您可以配置 Playwright 在運(yùn)行測試之前啟動(dòng)應(yīng)用程序。這真是太方便了！

我從我的項(xiàng)目中刪除了 start-server-and-test。

~/project$ pnpm remove start-server-and-test

在 playwright.config.js 中，我取消了底部 webServer 部分的注釋，將其修改為如下所示：

  /* Run your local dev server before starting the tests */
  webServer: {
     command: 'pnpm start',
     url: 'http://127.0.0.1:8080',
     reuseExistingServer: !process.env.CI,
  },

然后，我從原始 package.json 文件中刪除了 test:ci 腳本。相反，我的測試腳本如下所示：

  "scripts": {
    …
    "test": "playwright test --project=chromium --reporter list"
  },

在我的本地計(jì)算機(jī)上安裝 Playwright 瀏覽器

Playwright 安裝最新的瀏覽器二進(jìn)制文件以用于其測試。因此，在我的本地計(jì)算機(jī)上，我需要 Playwright 安裝其版本的 Chromium。

~/project$ pnpm playwright install chromium


Downloading Chromium 130.0.6723.31 (playwright build v1140)
from https://playwright.azureedge.net/builds/chromium/1140/chromium-linux.zip
164.5 MiB [====================] 100%

注意： Heroku 上的用于測試的 Chrome 構(gòu)建包安裝了我們將用于測試的瀏覽器。我們將設(shè)置 CI，以便 Playwright 使用該瀏覽器，而不是花費(fèi)時(shí)間和資源安裝自己的瀏覽器。

在本地運(yùn)行測試

這樣，我就一切準(zhǔn)備就緒了。是時(shí)候在本地嘗試我的測試了。

~/project$ pnpm test

> playwright test --project=chromium --reporter list

Running 3 tests using 3 workers

  ?  1 [chromium] > playwright.spec.js:21:3 > Text input > should display the entered text in the text input (911ms)
  ?  2 [chromium] > playwright.spec.js:14:3 > Playwright link > should navigate to Playwright documentation page (5.2s)
  ?  3 [chromium] > playwright.spec.js:31:3 > Form submission > should display the "Hello, X" message after form submission (959ms)

...
      - waiting for locator('a[href="https://playwright.dev/"]')


      13 | test.describe('Playwright link', () => {
      14 |   test('should navigate to Playwright documentation page', async ({ page }) => {
    > 15 |     await page.click('a[href="https://playwright.dev/"]');
         |                ^
      16 |     await expect(page.title()).resolves.toMatch('| Playwright');
      17 |   });
      18 | });

哦！這是正確的。我修改了測試，期望應(yīng)用程序中的鏈接將我?guī)У?Playwright 的文檔而不是 Puppeteer 的文檔。我需要在第 19 行更新 src/App.js：

<Link href="https://playwright.dev/" rel="noopener">
  Playwright Documentation
</Link>

現(xiàn)在，是時(shí)候再次運(yùn)行測試了......

~/project$ pnpm test

> playwright test --project=chromium --reporter list

Running 3 tests using 3 workers

  ?  1 [chromium] > playwright.spec.js:21:3 > Text input > should display the entered text in the text input (1.1s)
  ?  2 [chromium] > playwright.spec.js:14:3 > Playwright link > should navigate to Playwright documentation page (1.1s)
  ?  3 [chromium] > playwright.spec.js:31:3 > Form submission > should display the "Hello, X" message after form submission (1.1s)

  3 passed (5.7s)

測試通過了！接下來，是時(shí)候讓我們進(jìn)入 Heroku CI 了。

部署到 Heroku 以使用 CI 管道

我按照 Heroku 博客文章中的說明在 Heroku CI 管道中設(shè)置了我的應(yīng)用程序。

創(chuàng)建 Heroku 管道

在 Heroku 中，我創(chuàng)建了一個(gè)新管道并將其連接到我分叉的 GitHub 存儲(chǔ)庫。

接下來，我將我的應(yīng)用程序添加到了 staging。

然后，我轉(zhuǎn)到 測試 選項(xiàng)卡并單擊 啟用 Heroku CI。

最后，我修改了 app.json 文件以刪除設(shè)置為調(diào)用 npm test:ci 的測試腳本。我已經(jīng)從我的 package.json 文件中刪除了 test:ci 腳本?，F(xiàn)在要使用 package.json 中的測試腳本，Heroku CI 將默認(rèn)查找該腳本。

我的 app.json 文件確保使用 Chrome 進(jìn)行測試構(gòu)建包，如下所示：

~/project$ corepack enable pnpm


~/project$ corepack use pnpm@latest

Installing pnpm@9.12.3 in the project…
…
Progress: resolved 1444, reused 1441, downloaded 2, added 1444, done
…
Done in 14.4s

~/project$ rm package-lock.json


~/project$ pnpm install # just to show everything's good


Lockfile is up to date, resolution step is skipped
Already up to date
Done in 1.3s

初始測試運(yùn)行

我將代碼推送到 GitHub，這觸發(fā)了 Heroku CI 中的測試運(yùn)行。

試運(yùn)行失敗了，但我并不擔(dān)心。我知道需要做一些 Playwright 配置。

在測試日志中挖掘，我發(fā)現(xiàn)了這個(gè)：

~/project$ pnpm remove \
           babel-jest jest jest-puppeteer @testing-library/jest-dom

~/project$ $ pnpm create playwright
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
? Do you want to use TypeScript or JavaScript? · JavaScript
? Where to put your end-to-end tests? · tests
? Add a GitHub Actions workflow? (y/N) · false
? Install Playwright browsers (can be done manually via 'pnpm exec playwright install')? (Y/n) · false
? Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo pnpm exec playwright install-deps')? (y/N) · false

Installing Playwright Test (pnpm add --save-dev @playwright/test)…
…
Installing Types (pnpm add --save-dev @types/node)…
…
Done in 2.7s
Writing playwright.config.js.
Writing tests/example.spec.js.
Writing tests-examples/demo-todo-app.spec.js.
Writing package.json.

Playwright 正在尋找 Chrome 瀏覽器實(shí)例。我可以使用 playwright install chromium 命令安裝它，作為我的 CI 測試設(shè)置的一部分。但這將違背 Chrome 測試構(gòu)建包的全部目的。 Chrome 已安裝；我只需要正確指出它即可。

回顧 Heroku 的測試設(shè)置日志，我發(fā)現(xiàn)了這些行：

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

//    {
//      name: 'firefox',
//      use: { ...devices['Desktop Firefox'] },
//    },
//
//    {
//      name: 'webkit',
//      use: { ...devices['Desktop Safari'] },
//    },


  ],
…

所以，我想使用的瀏覽器位于/app/.chrome-for-testing/chrome-linux64/chrome。我只需要?jiǎng)∽骷胰ツ抢飳ふ宜?/p>

幫助 Playwright 找到已安裝的 Chrome 瀏覽器

注意：如果您對(duì)此處的具體細(xì)節(jié)不感興趣，您可以跳過此部分，只需將完整的 app.json 復(fù)制到下方即可。這應(yīng)該為您提供在 Heroku CI 上使用 Playwright 啟動(dòng)和運(yùn)行所需的信息。

在 Playwright 的文檔中，我發(fā)現(xiàn)您可以設(shè)置一個(gè)環(huán)境變量，告訴 Playwright 您是否為其所有瀏覽器安裝使用了自定義位置。該環(huán)境變量是 PLAYWRIGHT_BROWSERS_PATH。我決定從這里開始。

在 app.json 中，我設(shè)置了一個(gè)這樣的環(huán)境變量：

const ROOT_URL = 'http://localhost:8080';
const { test, expect } = require('@playwright/test');

const inputSelector = 'input[name="name"]';
const submitButtonSelector = 'button[type="submit"]';
const greetingSelector = 'h5#greeting';
const name = 'John Doe';

test.beforeEach(async ({ page }) => {
  await page.goto(ROOT_URL);
});

test.describe('Playwright link', () => {
  test('should navigate to Playwright documentation page', async ({ page }) => {
    await page.click('a[href="https://playwright.dev/"]');
    await expect(page.title()).resolves.toMatch('| Playwright');
  });
});

test.describe('Text input', () => {
  test('should display the entered text in the text input', async ({ page }) => {
    await page.fill(inputSelector, name);

    // Verify the input value
    const inputValue = await page.inputValue(inputSelector);
    expect(inputValue).toBe(name);
  });
});

test.describe('Form submission', () => {
  test('should display the "Hello, X" message after form submission', async ({ page }) => {
    const expectedGreeting = `Hello, ${name}.`;
    await page.fill(inputSelector, name);
    await page.click(submitButtonSelector);

    await page.waitForSelector(greetingSelector);
    const greetingText = await page.textContent(greetingSelector);
    expect(greetingText).toBe(expectedGreeting);
  });
});

我將代碼推送到 GitHub，看看 CI 中的測試會(huì)發(fā)生什么。

果然，又失敗了。然而，日志錯(cuò)誤顯示：

~/project$ corepack enable pnpm


~/project$ corepack use pnpm@latest

Installing pnpm@9.12.3 in the project…
…
Progress: resolved 1444, reused 1441, downloaded 2, added 1444, done
…
Done in 14.4s

~/project$ rm package-lock.json


~/project$ pnpm install # just to show everything's good


Lockfile is up to date, resolution step is skipped
Already up to date
Done in 1.3s

這讓我非常接近。我決定這樣做：

• 創(chuàng)建 Playwright 期望 Chrome 瀏覽器所在位置所需的文件夾。那將是一個(gè)像這樣的命令：

~/project$ pnpm remove \
           babel-jest jest jest-puppeteer @testing-library/jest-dom

~/project$ $ pnpm create playwright
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
? Do you want to use TypeScript or JavaScript? · JavaScript
? Where to put your end-to-end tests? · tests
? Add a GitHub Actions workflow? (y/N) · false
? Install Playwright browsers (can be done manually via 'pnpm exec playwright install')? (Y/n) · false
? Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo pnpm exec playwright install-deps')? (y/N) · false

Installing Playwright Test (pnpm add --save-dev @playwright/test)…
…
Installing Types (pnpm add --save-dev @types/node)…
…
Done in 2.7s
Writing playwright.config.js.
Writing tests/example.spec.js.
Writing tests-examples/demo-todo-app.spec.js.
Writing package.json.

• 在此文件夾中創(chuàng)建一個(gè)符號(hào)鏈接以指向 Heroku buildpack 安裝的 Chrome 二進(jìn)制文件。那看起來像這樣：

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

//    {
//      name: 'firefox',
//      use: { ...devices['Desktop Firefox'] },
//    },
//
//    {
//      name: 'webkit',
//      use: { ...devices['Desktop Safari'] },
//    },


  ],
…

但是，我擔(dān)心這是否能經(jīng)得起未來的考驗(yàn)。最終，Playwright 將使用新版本的 Chromium，并且它不會(huì)再出現(xiàn)在 chromium-1140 文件夾中。我怎樣才能知道劇作家會(huì)看哪里？

就在那時(shí)我發(fā)現(xiàn)你可以進(jìn)行瀏覽器安裝試運(yùn)行。

const ROOT_URL = 'http://localhost:8080';
const { test, expect } = require('@playwright/test');

const inputSelector = 'input[name="name"]';
const submitButtonSelector = 'button[type="submit"]';
const greetingSelector = 'h5#greeting';
const name = 'John Doe';

test.beforeEach(async ({ page }) => {
  await page.goto(ROOT_URL);
});

test.describe('Playwright link', () => {
  test('should navigate to Playwright documentation page', async ({ page }) => {
    await page.click('a[href="https://playwright.dev/"]');
    await expect(page.title()).resolves.toMatch('| Playwright');
  });
});

test.describe('Text input', () => {
  test('should display the entered text in the text input', async ({ page }) => {
    await page.fill(inputSelector, name);

    // Verify the input value
    const inputValue = await page.inputValue(inputSelector);
    expect(inputValue).toBe(name);
  });
});

test.describe('Form submission', () => {
  test('should display the "Hello, X" message after form submission', async ({ page }) => {
    const expectedGreeting = `Hello, ${name}.`;
    await page.fill(inputSelector, name);
    await page.click(submitButtonSelector);

    await page.waitForSelector(greetingSelector);
    const greetingText = await page.textContent(greetingSelector);
    expect(greetingText).toBe(expectedGreeting);
  });
});

“安裝位置”這一行至關(guān)重要。而且，如果我們?cè)O(shè)置 PLAYWRIGHT_BROWSERS_PATH，我們將看到以下內(nèi)容：

~/project$ pnpm remove start-server-and-test

這就是我想要的。借助一點(diǎn) awk 的魔力，我做到了：

  /* Run your local dev server before starting the tests */
  webServer: {
     command: 'pnpm start',
     url: 'http://127.0.0.1:8080',
     reuseExistingServer: !process.env.CI,
  },

弄清楚所有這些后，我只需要向 app.json 添加一個(gè)測試設(shè)置腳本即可。因?yàn)?PLAYWRIGHT_BROWSERS_PATH 已經(jīng)在 env 中設(shè)置，所以我的腳本會(huì)更簡單一些。這是我最終的 app.json 文件：

  "scripts": {
    …
    "test": "playwright test --project=chromium --reporter list"
  },

我將簡要介紹一下測試設(shè)置的作用：

1. 考慮到 PLAYWRIGHT_BROWSERS_PATH，使用 playwright install -- dry-run 和 awk 來確定 Playwright 將在其中查找 Chrome 瀏覽器的根文件夾。將其設(shè)置為 CHROMIUM_PATH 變量的值。

2. 在 CHROMIUM_PATH/chrome-linux 中創(chuàng)建一個(gè)新文件夾（以及任何必要的父文件夾），這是 Playwright 將在其中查找 chrome 二進(jìn)制文件的實(shí)際文件夾。

3. 在該文件夾中創(chuàng)建一個(gè)符號(hào)鏈接，以便 chrome 指向 Chrome 的 Heroku buildpack 安裝 (/app/.chrome-for-testing/chrome-linux64/chrome)。

再次運(yùn)行測試

通過我更新的 app.json 文件，Playwright 應(yīng)該能夠使用 buildpack 中的 Chrome 安裝。是時(shí)候再次運(yùn)行測試了。

成功！

測試設(shè)置腳本按預(yù)期運(yùn)行。

Playwright 能夠訪問 chrome 二進(jìn)制文件并運(yùn)行測試，并且通過了。

結(jié)論

我的 Web 應(yīng)用程序的端到端測試變得不再那么麻煩，因此我越來越優(yōu)先考慮它。最近幾天，這意味著更多地使用劇作家。它靈活且快速?，F(xiàn)在我已經(jīng)完成了工作（對(duì)我和你?。?，在 Heroku CI 中使用 Chrome for Test 構(gòu)建包啟動(dòng)并運(yùn)行它，我可以開始構(gòu)建我的瀏覽器自動(dòng)化測試套件了再次。

本演練的代碼可在我的 GitHub 存儲(chǔ)庫中找到。

編碼愉快！

以上是Heroku 中的 Playwright 和 Chrome 瀏覽器測試的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！