diff --git a/test2/playwright.config.ts b/test2/playwright.config.ts index 063ae9d..ae50bcc 100644 --- a/test2/playwright.config.ts +++ b/test2/playwright.config.ts @@ -12,12 +12,16 @@ import { defineConfig, devices } from '@playwright/test'; */ export default defineConfig({ testDir: './tests', + testMatch:[ + 'basic.spec.ts', + 'llm2.spec.ts' + ], /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ forbidOnly: !!process.env.CI, /* Retry on CI only */ - retries: process.env.CI ? 2 : 0, + retries: process.env.CI ? 2 : 2, /* Opt out of parallel tests on CI. */ workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ @@ -39,15 +43,15 @@ export default defineConfig({ use: { ...devices['Desktop Chrome'] }, }, - { - name: 'firefox', - use: { ...devices['Desktop Firefox'] }, - }, + // { + // name: 'firefox', + // use: { ...devices['Desktop Firefox'] }, + // }, - { - name: 'webkit', - use: { ...devices['Desktop Safari'] }, - }, + // { + // name: 'webkit', + // use: { ...devices['Desktop Safari'] }, + // }, /* Test against mobile viewports. */ // { diff --git a/test2/prompts_record.md b/test2/prompts_record.md index 32fda84..b9be0ce 100644 --- a/test2/prompts_record.md +++ b/test2/prompts_record.md @@ -1,3 +1,5 @@ +# Generate Website with Claude 3.5 + ## Prompt 1 請幫我製作一個線上測驗網頁,並完成以下功能,需要附上完成程式碼。(包括 html, css, js) 具體功能如下: @@ -51,3 +53,98 @@ bug: 送出測驗後題目沒有變色,並且無法回到下一題 ``` + +# Generate test script with Claude 3.5 + +## Prompt 1 +這是一個線上測驗網頁(包括html, css, js),我想要使用"Playwright"進行端對端測試,幫我使用Typescirpt生成測試腳本,並給我完整的程式碼。 +在html tag中含有"aria-label"與"data-testid"屬性,請盡量用"getByTestId"進行選擇,並註明現在的測試對象為何。 + +## Prompt 2 +程式碼大致正確,只有在'Correct and incorrect answers are highlighted'中,測試答案的顏色錯誤。 +在提交測驗後,畫面會停留在第三題,應該要回上一題檢查答案顏色。 + +### 成果 +順利完成所有需求 +```ts +import { test, expect } from '@playwright/test'; + +test.describe('Online Quiz E2E Tests', () => { + test.beforeEach(async ({ page }) => { + // 導航到測驗頁面 + await page.goto('/'); + }); + + test('Quiz title is visible', async ({ page }) => { + // 測試對象: 標題 + const title = page.getByTestId('quiz-title'); + await expect(title).toBeVisible(); + await expect(title).toHaveText('線上測驗'); + }); + + test('Navigate through questions', async ({ page }) => { + // 測試對象: 問題計數器 + const questionCount = page.getByTestId('question-count'); + await expect(questionCount).toHaveText('第 1 題 / 共 3 題'); + + // 測試對象: 下一題按鈕 + const nextButton = page.getByTestId('next-button'); + await nextButton.click(); + await expect(questionCount).toHaveText('第 2 題 / 共 3 題'); + + await nextButton.click(); + await expect(questionCount).toHaveText('第 3 題 / 共 3 題'); + + // 測試對象: 前一題按鈕 + const prevButton = page.getByRole('button', { name: '前一個問題' }); + await prevButton.click(); + await expect(questionCount).toHaveText('第 2 題 / 共 3 題'); + }); + + test('Select answers and submit quiz', async ({ page }) => { + // 測試對象: 答案選項 + await page.getByTestId('option-a').click(); + await page.getByTestId('next-button').click(); + + await page.getByTestId('option-b').click(); + await page.getByTestId('next-button').click(); + + await page.getByTestId('option-c').click(); + + // 測試對象: 送出按鈕 + const submitButton = page.getByTestId('submit-button'); + await submitButton.click(); + + // 測試對象: 測驗結果 + const result = page.getByTestId('quiz-result'); + await expect(result).toBeVisible(); + await expect(result).toHaveText('答對題數:3 / 總題數:3'); + }); + + test('Correct and incorrect answers are highlighted', async ({ page }) => { + // 選擇答案 + await page.getByTestId('option-a').click(); // 正確答案 + await page.getByTestId('next-button').click(); + + await page.getByTestId('option-a').click(); // 錯誤答案 (正確答案是 b) + await page.getByTestId('next-button').click(); + + await page.getByTestId('option-c').click(); // 正確答案 + + // 提交測驗 + await page.getByTestId('submit-button').click(); + + // 測試對象: 答案選項的顏色 + // 檢查第三題 (當前頁面) + await expect(page.locator('.options')).toHaveClass(/correct-question/); + + // 檢查第二題 + await page.getByRole('button', { name: '前一個問題' }).click(); + await expect(page.locator('.options')).toHaveClass(/incorrect-question/); + + // 檢查第一題 + await page.getByRole('button', { name: '前一個問題' }).click(); + await expect(page.locator('.options')).toHaveClass(/correct-question/); + }); +}); +```