Skip to content
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

Merged
merged 1 commit into from
Sep 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions tests/drop-times/xdesign.spec.ts
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')
})
})
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions tests/time-select/xdesign.spec.ts
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')
Comment on lines +4 to +10
Copy link

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.

  1. The test title is in Chinese. For consistency and better maintainability, consider using English for all test titles.

  2. 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.

-  test('默认--UI截图', async ({ page }) => {
+  test('Default - UI screenshot', async ({ page }) => {

Consider refactoring the navigation to use a more robust method:

const BASE_URL = process.env.TEST_BASE_URL || 'http://your-default-url.com';
// ...
await page.goto(`${BASE_URL}/time-select#basic-usage`);


// 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
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve screenshot names and icon selection method.

  1. The screenshot names could be more specific to the time-select component and the action being performed.

  2. The method of selecting the clear icon using getByLabel and nth might be brittle if the page structure changes. Consider using a more robust selector 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
Copy link

Choose a reason for hiding this comment

The 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:

  1. Verify the selected time value is correctly displayed in the input field.
  2. Test error states (e.g., selecting an invalid time).
  3. Test edge cases (e.g., selecting the first and last available times).
  4. Test keyboard navigation and accessibility features.

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');
});

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.