-
Notifications
You must be signed in to change notification settings - Fork 17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
test(time-select;drop-times): add e2e UI test #63
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { expect, test } from '@playwright/test' | ||
|
||
test.describe('drop-times组件xdesign规范', () => { | ||
test('默认--UI截图', async ({ page }) => { | ||
page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
await page.goto('drop-times#basic-usage') | ||
const demo = page.locator('#basic-usage .pc-demo') | ||
const bigPic = page.locator('#doc-layout div').filter({ hasText: '示例API基本用法详细用法参考如下示例当前选中值:drop' }).nth(2) | ||
await expect(demo).toBeInViewport() | ||
await expect(demo).toHaveScreenshot('basic-usage.png') | ||
|
||
// hover时截图 | ||
const input = demo.getByRole('textbox', { name: '请选择' }) | ||
await input.hover() | ||
await expect(demo).toBeInViewport() | ||
await expect(demo).toHaveScreenshot('hover.png') | ||
|
||
// 聚焦时截图 | ||
await input.click() | ||
await expect(bigPic).toBeInViewport() | ||
await expect(bigPic).toHaveScreenshot('click.png') | ||
|
||
// 聚焦时截图 | ||
const select = page.getByText('00:30') | ||
await select.hover() | ||
await expect(bigPic).toBeInViewport() | ||
await expect(bigPic).toHaveScreenshot('focus-hover.png') | ||
|
||
// 选中后截图 | ||
await select.click() | ||
await expect(demo).toBeInViewport() | ||
await expect(demo).toHaveScreenshot('select.png') | ||
}) | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { expect, test } from '@playwright/test' | ||
|
||
test.describe('time-select组件xdesign规范', () => { | ||
test('默认--UI截图', async ({ page }) => { | ||
page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
await page.goto('time-select#basic-usage') | ||
const demo = page.locator('#basic-usage .pc-demo') | ||
const bigPic = page.locator('#doc-layout div').filter({ hasText: '示例API基本用法详细用法参考如下示例。time-' }).nth(2) | ||
await expect(demo).toBeInViewport() | ||
await expect(demo).toHaveScreenshot('basic-usage.png') | ||
|
||
// hover时截图 | ||
const input = demo.getByRole('textbox', { name: '选择时间' }) | ||
await input.hover() | ||
await expect(demo).toBeInViewport() | ||
await expect(demo).toHaveScreenshot('hover.png') | ||
|
||
// 聚焦时截图 | ||
await input.focus() | ||
await expect(bigPic).toBeInViewport() | ||
await expect(bigPic).toHaveScreenshot('focus.png') | ||
|
||
// 聚焦时截图 | ||
const select = page.getByText('10:00') | ||
await select.hover() | ||
await expect(bigPic).toBeInViewport() | ||
await expect(bigPic).toHaveScreenshot('focus-hover.png') | ||
|
||
// 选中时截图 | ||
await select.click() | ||
await expect(demo).toBeInViewport() | ||
await expect(demo).toHaveScreenshot('select.png') | ||
|
||
// 选中后清除图标截图 | ||
const selectInput = demo.getByRole('textbox', { name: ':00' }) | ||
await selectInput.hover() | ||
await expect(demo).toBeInViewport() | ||
await expect(demo).toHaveScreenshot('select-hover.png') | ||
|
||
// 清除图标hover时截图 | ||
const icon = page.getByLabel('示例', { exact: true }).locator('path').nth(1) | ||
await icon.hover() | ||
await expect(demo).toBeInViewport() | ||
await expect(demo).toHaveScreenshot('icon-hover.png') | ||
Comment on lines
+34
to
+44
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Improve screenshot names and icon selection method.
Rename the screenshots for clarity: - await expect(demo).toHaveScreenshot('select-hover.png')
+ await expect(demo).toHaveScreenshot('time-select-selected-hover.png')
- await expect(demo).toHaveScreenshot('icon-hover.png')
+ await expect(demo).toHaveScreenshot('time-select-clear-icon-hover.png') Consider using a more robust selector for the clear icon: const clearIcon = demo.locator('.clear-icon-class');
// or
const clearIcon = demo.getByRole('button', { name: 'Clear' }); Replace the existing icon selection with the more robust method: - const icon = page.getByLabel('示例', { exact: true }).locator('path').nth(1)
- await icon.hover()
+ const clearIcon = demo.locator('.clear-icon-class');
+ await clearIcon.hover() |
||
}) | ||
}) | ||
Comment on lines
+1
to
+46
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Consider adding more test cases for improved coverage. While the current test provides good coverage of basic user interactions, consider adding the following test cases to improve overall coverage:
Here's an example of how you might add a test to verify the selected time value: test('Verify selected time value', async ({ page }) => {
// ... (setup code) ...
const timeOption = page.getByText('10:00');
await timeOption.click();
const input = demo.getByRole('textbox', { name: '选择时间' });
await expect(input).toHaveValue('10:00');
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Use English for test titles and consider more robust navigation.
The test title is in Chinese. For consistency and better maintainability, consider using English for all test titles.
The navigation to the specific component demo uses a fragment identifier, which might be brittle if the page structure changes. Consider using a more robust method to navigate to the specific demo, such as environment variables or configuration files for URLs.
Consider refactoring the navigation to use a more robust method: