Skip to content

Commit

Permalink
Merge pull request #23 from Yuankai619/develop/test2-p2
Browse files Browse the repository at this point in the history 
Develop test2 Claude generate playwright script
  • Loading branch information
@Yuankai619
Yuankai619 authored Sep 19, 2024
2 parents 8eedec6 + edb0438 commit 5bf2f65
Show file tree
Hide file tree
Showing 5 changed files with 270 additions and 10 deletions.
22 changes: 13 additions & 9 deletions test2/playwright.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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. */
// {
Expand Down
97 changes: 97 additions & 0 deletions test2/prompts_record.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
# Generate Website with Claude 3.5

## Prompt 1
請幫我製作一個線上測驗網頁，並完成以下功能，需要附上完成程式碼。(包括 html, css, js)
具體功能如下：
Expand Down Expand Up @@ -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/);
});
});
```
2 changes: 1 addition & 1 deletion test2/tests/basic.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'];

Expand Down
79 changes: 79 additions & 0 deletions test2/tests/llm1.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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/);
});
});
80 changes: 80 additions & 0 deletions test2/tests/llm2.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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/);
});
});

0 comments on commit 5bf2f65

Please sign in to comment.