E2E (#5)

* chore(deps): 🔗 install Playwright

Installed Playwright as a dev dependency for end-to-end testing

* chore: 🔧 add Playwright configuration

* chore: 🔧 update .gitignore to include Playwright directories

* test: 🚨 test Home page

* docs: 📚 update README.md

Updated to include Playwright for end-to-end testing

Author: andrewdyer

.gitignore

@@ -27,3 +27,9 @@ dist-ssr
 
 # Coverage directory
 coverage
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -25,6 +25,7 @@ Before you begin, ensure you have met the following requirements:
 This template includes the following additional tools and configurations:
 
 - [Vitest](https://vitest.dev/) for unit testing, along with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for testing React components, Vitest UI, and coverage reports.
+- [Playwright](https://playwright.dev/) for end-to-end testing with UI and coverage support.
 - [Storybook](https://storybook.js.org/) for building and testing UI components in isolation.
 - [React Router](https://reactrouter.com/) for client-side routing.
 - [Vite PWA](https://vite-pwa-org.netlify.app/) (Progressive Web App) support for offline capabilities and better performance on mobile devices.

e2e/pages/Home.ts

@@ -0,0 +1,32 @@
+import { Locator, Page } from '@playwright/test';
+
+class Home {
+  readonly page: Page;
+  readonly title = 'Vite + React + TS';
+  readonly viteLink: Locator;
+  readonly reactLink: Locator;
+  readonly heading: Locator;
+  readonly helperText: Locator;
+  readonly counterButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.viteLink = page.locator('a[href="https://vite.dev"]');
+    this.reactLink = page.locator('a[href="https://react.dev"]');
+    this.heading = page.locator('h1');
+    this.helperText = page.locator('.read-the-docs');
+    this.counterButton = page.getByRole('button', { name: /count is \d+/ });
+  }
+
+  async goto() {
+    await this.page.goto('/');
+  }
+
+  async incrementCounter(times: number) {
+    for (let i = 0; i < times; i++) {
+      await this.counterButton.click();
+    }
+  }
+}
+
+export default Home;

e2e/pages/index.ts

@@ -0,0 +1 @@
+export { default as Home } from './Home';

e2e/tests/home.spec.ts

@@ -0,0 +1,40 @@
+import { expect, test } from '@playwright/test';
+
+import { Home } from '../pages';
+
+test.describe('Home', () => {
+  let home: Home;
+
+  test.beforeEach(async ({ page }) => {
+    home = new Home(page);
+
+    await home.goto();
+  });
+
+  test('Home has expected title', async ({ page }) => {
+    await expect(page).toHaveTitle(home.title);
+  });
+
+  test('Vite and React logo links are correct', async () => {
+    await expect(home.viteLink).toHaveAttribute('href', 'https://vite.dev');
+    await expect(home.reactLink).toHaveAttribute('href', 'https://react.dev');
+  });
+
+  test('Page displays correct heading and text', async () => {
+    await expect(home.heading).toHaveText('Vite + React');
+    await expect(home.helperText).toHaveText(
+      'Click on the Vite and React logos to learn more'
+    );
+  });
+
+  test('Counter increments correctly', async () => {
+    await home.incrementCounter(1);
+    await expect(home.counterButton).toContainText('count is 1');
+
+    await home.incrementCounter(1);
+    await expect(home.counterButton).toContainText('count is 2');
+
+    await home.incrementCounter(1);
+    await expect(home.counterButton).toContainText('count is 3');
+  });
+});

package.json

@@ -18,6 +18,8 @@
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui",
     "test:watch": "vitest",
+    "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui",
     "type-check": "tsc --noEmit"
   },
   "lint-staged": {
@@ -31,6 +33,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
     "@eslint/js": "^9.15.0",
+    "@playwright/test": "^1.51.1",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-onboarding": "^8.4.7",

playwright.config.ts

@@ -0,0 +1,62 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'yarn start',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+  },
+});

yarn.lock

@@ -1287,6 +1287,13 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@playwright/test@^1.51.1":
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.51.1.tgz#75357d513221a7be0baad75f01e966baf9c41a2e"
+  integrity sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q==
+  dependencies:
+    playwright "1.51.1"
+
 "@polka/url@^1.0.0-next.24":
   version "1.0.0-next.28"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.28.tgz#d45e01c4a56f143ee69c54dd6b12eade9e270a73"
@@ -3141,6 +3148,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+[email protected]:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -4171,6 +4183,20 @@ picomatch@^4.0.2:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
   integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
 
+[email protected]:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.51.1.tgz#d57f0393e02416f32a47cf82b27533656a8acce1"
+  integrity sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw==
+
+[email protected]:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.51.1.tgz#ae1467ee318083968ad28d6990db59f47a55390f"
+  integrity sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw==
+  dependencies:
+    playwright-core "1.51.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 polished@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/polished/-/polished-4.3.1.tgz#5a00ae32715609f83d89f6f31d0f0261c6170548"