Playwright? ???? ?? ? ??????? ?? ???? ???? ???? ??? ? ??? ???? ??? E2E(?? ? ??) ??? ????????. Vue.js? ?? ???? Playwright? ??????? ??? ????? ???? ???? ????? ???? ? ??? ? ? ????. Playwright? Vue.js? ????? ???? ?? ? ?? ?? ??? ??? ????.

1. Vue.js? ??? ??

??? ??

???? ???? ?? ????? Playwright? ?????.

npm install -D @playwright/test

??? ???? ?? ???? ???? ??? ?? ????.

npx playwright install

??? ??

playwright.config.ts ?? .js ??? ???? ???? ??, ?? ??, ?? URL? ?? ??? ???????.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  use: {
    baseURL: 'http://localhost:3000',
    headless: true,
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
  },
});

Vue CLI ?? Vite? ??

?? ??? ???? ???? ??? ???? Vue ?? ?? ????? ??? ??????? ? ? ??? ???.

---

2. ??? ??

???? ?? ???? ????? ??? ??? ??? ??? ?????. ???? ??? ??? ????.

project/
├── src/
├── tests/
│   ├── e2e/
│   │   ├── example.spec.ts
│   │   ├── login.spec.ts
│   ├── fixtures/
│   ├── helpers/

• e2e/: ??? ???? ???? ????.
• Fixtures/: ??? ??? ??? ???? ?????.
• helpers/: ???? ??? ??? ?? ???? ??? ???? ????.

---

3. E2E ??? ?? ???? ???? ?????

Vue Test Utils ?? Cypress Component Testing? ?? ??? ???? ?? ??? ????? ??????. ?? Playwright? ? ??? E2E ???? ???? ?? ?? Vue ?? ??? ???? ????? ???? ? ??? ???.

---

4. ?? API ? ???

E2E ??? ??? ?? ??? ???? ???? ???. Playwright? ?? API? ???? ???? ??? ???? ??? ?????.

test('loads mock data', async ({ page }) => {
  await page.route('**/api/data', route =>
    route.fulfill({
      status: 200,
      body: JSON.stringify({ key: 'value' }),
    })
  );
  await page.goto('/');
  await expect(page.locator('#data-key')).toHaveText('value');
});

??? ?? ??? ??? ???? ???? ?? ??? ?????.

---

5. ???? ?? ?? ??

Playwright? ??? ??? ??? ??? ??? ?????.

• data-testid ??: Vue ?? ??? data-testid ??? ???? ????? ?? ?? ? ????.

  <button data-testid="submit-button">Submit</button>

• Playwright? ?? ????: ??? ?? ???? ?? locator()? ?? ???? ?????.

  const button = page.locator('button[data-testid="submit-button"]');

---

6. ?? ? ??? ???

??? ?? ??

page.waitForTimeout(1000)? ?? ??? ?? ??? ???? ???. ?? Playwright? waitFor ????? ???? ?? ??? ?????.

npm install -D @playwright/test

??? ??? ??

Playwright? ?? ??? ??? ????? ??? ??? ?? ?? ? ????.

npx playwright install

---

7. ??? ? ?? ??

• ???? ? ??: ??? ???? ?? Playwright ???? ???? ? ??? ??????. ??? ?? ??? ??? ???? ? ??? ???.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  use: {
    baseURL: 'http://localhost:3000',
    headless: true,
    screenshot: 'only-on-failure',
    trace: 'on-first-retry',
  },
});

• ??? ??: ????? ??? ??? ??? ???? Playwright ???? ?????.

project/
├── src/
├── tests/
│   ├── e2e/
│   │   ├── example.spec.ts
│   │   ├── login.spec.ts
│   ├── fixtures/
│   ├── helpers/

---

8. CI/CD ??

Playwright? CI/CD ?????? ???? ??? ??? ?????. ?????? ?????.

• ???? ?????.
• Vue.js ?? ??? ?????.
• ??? ???? ??? ???? ?????.

GitHub Actions? ?? ?? ??? ??? ????.

test('loads mock data', async ({ page }) => {
  await page.route('**/api/data', route =>
    route.fulfill({
      status: 200,
      body: JSON.stringify({ key: 'value' }),
    })
  );
  await page.goto('/');
  await expect(page.locator('#data-key')).toHaveText('value');
});

---

9. Vue.js ?? ?? ??

??? ??

Vue Router? ????? ? ??? ??? ??? ???? ???.

  <button data-testid="submit-button">Submit</button>

?? ??

Vue? ??? ????? ?? ???? DOM? ?? ??? ?????.

  const button = page.locator('button[data-testid="submit-button"]');

---

10. ???? ??? ??

• ?? ??? ???? ?? ??? ?? ????? ???? ???????.
• ???? ???? ?????? ??????? ?? ??? ?????.
• ???? ???? ?? Playwright ?? ??? ?? ?????.

? ??? Playwright? ?? Vue.js ?????: ??? ? ?? ?? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!