Develop test2 Claude generate playwright script

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. */
     // {

test2/prompts_record.md

@@ -1,3 +1,5 @@
+# Generate Website with Claude 3.5
+
 ## Prompt 1
 請幫我製作一個線上測驗網頁，並完成以下功能，需要附上完成程式碼。(包括 html, css, js)
 具體功能如下：
@@ -51,3 +53,98 @@ bug: 送出測驗後題目沒有變色，並且無法回到下一題
     <script src="script.js"></script>
 </body>
 ```
+
+# 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/);
+  });
+});
+```

test2/tests/basic.spec.ts

@@ -32,7 +32,7 @@ test('loading page', async ({ page }) => {
   await expect(page.getByTestId('quiz-result')).toBeVisible();
 });
 
-test('start a test', async ({ page }) => {
+test('start a exam', async ({ page }) => {
   await page.goto('/');
   const options = ['option-a', 'option-b', 'option-c', 'option-d'];
 

test2/tests/llm1.spec.ts

@@ -0,0 +1,79 @@
+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();
+    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.getByTestId('next-button').click();
+    await expect(page.locator('.options')).toHaveClass(/incorrect-question/);
+
+    await page.getByTestId('next-button').click();
+    await expect(page.locator('.options')).toHaveClass(/correct-question/);
+  });
+});

test2/tests/llm2.spec.ts

@@ -0,0 +1,80 @@
+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/);
+  });
+});