Sample React Component
{submittedText &&
Submitted Text: {submittedText}
}
);
}
export default App;
```
創建一個 Test folder 裡面包含檔案：SampleComponent.spec.js
```javascript
const { test, expect } = require('@playwright/test');
test.describe('SampleComponent', () => {
test('should submit text and display it correctly', async ({ page }) => {
// Navigate to the page where your component is rendered
await page.goto('http://localhost:3000'); // Change URL to your local app
// Check if the input field, button, and text are present
const input = page.locator('input[placeholder="Enter some text"]');
const button = page.locator('button:has-text("Submit")');
const header = page.locator('h1');
await expect(header).toHaveText('Sample React Component');
// Fill the input field
await input.fill('Hello, Playwright!');
// Click the submit button
await button.click();
// Verify that the submitted text is displayed correctly
const submittedText = page.locator('p');
await expect(submittedText).toHaveText('Submitted Text: Hello, Playwright!');
// Ensure the input field is cleared after submit
await expect(input).toHaveValue('');
});
});
```
## 使用 Headed 模式
```
npx playwright test --headed
```
> playWright 預設為 headless 模式，不開啟瀏覽器
>
> Headed 必須先使用 npx playwright install\`安裝 chromium
## 開啟錄製功能產生測試代碼
```
npx playwright codegen http://localhost:3000
```
使用後會出現一除錯視窗上面顯示我們在頁面上操作產生的測試代碼
