E2Eテスト自動化入門

「E2Eテストを自動化したいけれど、何から始めればいいのかわからない…」 「GitHub Actionsを使って、テストをCI/CDに組み込みたい！」 そんな方に向けて、デモを交えながらわかりやすく解説します。

E2Eテスト自動化ツールを使ったテストシナリオ作成の基本からGitHub Actionsを活用したCI/CDパイプラインへの統合までの流れを一緒に学びましょう。

https://devops-study.connpass.com/event/346364/

Transcript

1. ‘25/02開催 とことんDevOps勉強会 2025年02月26日(水) 20:00より E2Eテスト自動化入門 ～テスト作成からGitHub Actionsでの 自動実行までやってみよう～
8. npm init playwright@latest
9. npm init playwright@latest tests/example.spec.ts ※
10. import { test, expect } from '@playwright/test'; test('has title', async ({ page }) => { await page.goto('https://playwright.dev/'); // Expect a title "to contain" a substring. await expect(page).toHaveTitle(/Playwright/); }); test('get started link', async ({ page }) => { await page.goto('https://playwright.dev/'); // Click the get started link. await page.getByRole('link', { name: 'Get started' }).click(); // Expects page to have a heading with the name of Installation. await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); });
11. npx playwright test npx playwright test --project=chromium npx playwright test tests/example.spec.ts npx playwright test --ui
14. ※
16. ※
19. ※
21. Record new
23. import { test, expect } from '@playwright/test'; test('has title', async ({ page }) => { await page.goto('https://playwright.dev/'); // Expect a title "to contain" a substring. await expect(page).toHaveTitle(/Playwright/); }); test('get started link', async ({ page }) => { await page.goto('https://playwright.dev/'); // Click the get started link. await page.getByRole('link', { name: 'Get started' }).click(); // Expects page to have a heading with the name of Installation. await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); });
24. test('タイトル', async ({ page }) => { ... }); タイトル import { test, expect } from '@playwright/test'; test('has title', async ({ page }) => { // テストシナリオ1 }); test('get started link', async ({ page }) => { // テストシナリオ2 });
25. test('タイトル', async ({ page }) => { ... }); test('has title', async ({ page }) => { await page.goto('https://playwright.dev/'); // Expect a title "to contain" a substring. await expect(page).toHaveTitle(/Playwright/); });
26. page.goto() await page.goto('https://playwright.dev/');
27. .toHaveTitle() await expect(page).toHaveTitle(/Playwright/);
28. test('get started link', async ({ page }) => { await page.goto('https://playwright.dev/'); // Click the get started link. await page.getByRole('link', { name: 'Get started' }).click(); // Expects page to have a heading with the name of Installation. await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); });
29. page.getByRole() link Get started link <a> await page.getByRole('link', { name: 'Get started' }).click();
30. Installation page.getByRole('heading', { name: 'Installation' }) <h1> <h6> Installation expect() .toBeVisible() await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
31. .getByRole() getByText() getByLabel() getByTestId() locator()
32. locator() #username username .btn btn button div > p div p await page.locator('#username').fill('my_username');