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

幸運(yùn)的是，多年來(lái)，用於端到端瀏覽器內(nèi)測(cè)試的工具已經(jīng)變得更好更快。透過(guò)無(wú)頭瀏覽器設(shè)置，我可以執(zhí)行瀏覽器測(cè)試作為 CI 的一部分。

最近，我看到這篇 Heroku 部落格文章，討論在 Heroku CI 中使用無(wú)頭 Chrome 進(jìn)行自動(dòng)化瀏覽器內(nèi)測(cè)試。 Heroku 有一個(gè)安裝 headless Chrome 的建置包，您可以在 CI 管道中呼叫它來(lái)進(jìn)行測(cè)試。

部落格文章中的範(fàn)例設(shè)定是使用 Puppeteer 和 Jest 測(cè)試的 React 應(yīng)用程式。這是一個(gè)很好的開(kāi)始…但是如果我使用 Playwright 而不是 Puppeteer 呢？可以嗎？

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

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

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

Heroku 的用於測(cè)試的 Chrome 建置套件將 Chrome 安裝在 Heroku 應(yīng)用程式上，因此您可以透過(guò)非常輕量級(jí)的設(shè)定在 Heroku CI 中執(zhí)行 Playwright 測(cè)試。

測(cè)試申請(qǐng)簡(jiǎn)介

因?yàn)槲抑皇菄L試這個(gè)，所以我分叉了最初在 Heroku 部落格文章中引用的 GitHub 儲(chǔ)存庫(kù)。該應(yīng)用程式是一個(gè)簡(jiǎn)單的 React 應(yīng)用程序，帶有連結(jié)、文字輸入和提交按鈕。共有三個(gè)測(cè)驗(yàn)：

1. 驗(yàn)證連結(jié)是否有效並重定向到正確的位置。

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

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

非常簡(jiǎn)單?，F(xiàn)在，我只需更改程式碼以使用 Playwright 而不是 Puppeteer 和 Jest。哦，我還想使用 pnpm 而不是 npm。這是我分叉的 GitHub 儲(chǔ)存庫(kù)的連結(jié)。

修改程式碼以使用 Playwright

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

使用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)目中

接下來(lái)，我刪除了 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 設(shè)定部分。

將 Playwright 配置為僅使用 Chromium

您可以在 Chrome、Firefox 和 Safari 中執(zhí)行 Playwright 測(cè)試。由於我專注於 Chrome，因此我從生成的 playwright.config.js 檔案的專案部分中刪除了其他瀏覽器：

  /* 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 測(cè)試程式碼交換為 Playwright 測(cè)試程式碼

原始程式碼有一個(gè) Puppeteer 測(cè)試文件，位於 src/tests/puppeteer.test.js。我將該檔案移至tests/playwright.spec.js。然後，我更新了測(cè)試以使用劇作家的約定，它映射得相當(dāng)乾淨(jìng)。新的測(cè)試文件如下所示：

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

為了測(cè)試我的 React 應(yīng)用程序，我需要先在一個(gè)單獨(dú)的進(jìn)程中啟動(dòng)它（在 http://localhost:8080），然後我可以執(zhí)行我的測(cè)試。無(wú)論我使用 Puppeteer 還是 Playwright，都會(huì)發(fā)生這種情況。對(duì)於 Puppeteer，Heroku 範(fàn)例使用了 start-server-and-test 套件。但是，您可以配置 Playwright 在執(zhí)行測(cè)試之前啟動(dòng)應(yī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 腳本。相反，我的測(cè)試腳本如下所示：

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

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

Playwright 安裝最新的瀏覽器二進(jìn)位檔案以用於其測(cè)試。因此，在我的本機(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 上的用於測(cè)試的 Chrome 建置套件安裝了我們將用於測(cè)試的瀏覽器。我們將設(shè)定 CI，以便 Playwright 使用該瀏覽器，而不是花費(fèi)時(shí)間和資源安裝自己的瀏覽器。

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

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

~/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 | });

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

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

現(xiàn)在，是時(shí)候再次執(zhí)行測(cè)試了...

~/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)

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

部署到 Heroku 以使用 CI 管道

我按照 Heroku 部落格文章中的說(shuō)明在 Heroku CI 管道中設(shè)定了我的應(yīng)用程式。

建立 Heroku 管道

在 Heroku 中，我建立了一個(gè)新管道並將其連接到我分叉的 GitHub 儲(chǔ)存庫(kù)。

接下來(lái)，我將我的應(yīng)用程式加入了 staging。

然後，我轉(zhuǎn)到 測(cè)試 標(biāo)籤並點(diǎn)擊 啟用 Heroku CI。

最後，我修改了 app.json 檔案以刪除設(shè)定為呼叫 npm test:ci 的測(cè)試腳本。我已經(jīng)從我的 package.json 檔案中刪除了 test:ci 腳本?，F(xiàn)在要使用 package.json 中的測(cè)試腳本，Heroku CI 將預(yù)設(shè)尋找該腳本。

我的 app.json 檔案確保使用 Chrome 進(jìn)行測(cè)試建置包，如下所示：

~/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

初始測(cè)試運(yùn)行

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

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

在測(cè)試日誌中挖掘，我發(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 測(cè)試設(shè)定的一部分。但這將違背 Chrome 測(cè)試建置包的全部目的。 Chrome 已安裝；我只需要正確指出它。

回顧 Heroku 的測(cè)試設(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)∽骷胰ツ茄e尋找它。

協(xié)助 Playwright 找到已安裝的 Chrome 瀏覽器

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

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

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

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 中的測(cè)試會(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

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

• 建立 Playwright 期望 Chrome 瀏覽器所在位置所需的資料夾。那將會(huì)是一個(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.

• 在此資料夾中建立一個(gè)符號(hào)連結(jié)以指向 Heroku buildpack 安裝的 Chrome 二進(jìn)位。那看起來(lái)像這樣：

  /* 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)得起未來(lái)的考驗(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è)測(cè)試設(shè)定腳本。因?yàn)?PLAYWRIGHT_BROWSERS_PATH 已經(jīng)在 env 中設(shè)置，所以我的腳本會(huì)更簡(jiǎn)單一些。這是我最終的 app.json 檔案：

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

我將簡(jiǎn)單介紹一下測(cè)試設(shè)定的作用：

1. 考慮到 PLAYWRIGHT_BROWSERS_PATH，使用 playwright install -- dry-run 和 awk 來(lái)確定 Playwright 將在其中尋找 Chrome 瀏覽器的根資料夾。將其設(shè)定為 CHROMIUM_PATH 變數(shù)的值。

2. 在 CHROMIUM_PATH/chrome-linux 中建立一個(gè)新資料夾（以及任何必要的父資料夾），這是 Playwright 將在其中尋找 chrome 二進(jìn)位檔案的實(shí)際資料夾。

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

再次運(yùn)行測(cè)試

透過(guò)我更新的 app.json 文件，Playwright 應(yīng)該可以使用 buildpack 中的 Chrome 安裝。是時(shí)候再次執(zhí)行測(cè)試了。

成功！

測(cè)試設(shè)定腳本如預(yù)期運(yùn)作。

Playwright 能夠存取 chrome 二進(jìn)位檔案並執(zhí)行測(cè)試，並且通過(guò)了。

結(jié)論

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

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

編碼愉快！

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