test(button): add e2e UI snapshot #34
Conversation
WalkthroughA new test suite has been added in Changes
Possibly related PRs
Suggested reviewers
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Outside diff range and nitpick comments (3)
tests/button/xdesign.spec.ts (3)
12-20: Remove unused variable 'i' if not neededAlternatively, if unique filenames are not required, you can remove the variable
isince it is not used elsewhere.Apply this diff to remove
i:-let i = 1; for (const btn of btns) { await btn.hover(); await page.waitForTimeout(100); await expect(demo).toBeInViewport(); await expect(demo).toHaveScreenshot({ threshold: 10 }); - i++; }
31-39: Remove unused variable 'i' if not neededIf unique filenames are not required, you can remove the variable
i.Apply this diff:
-let i = 1; for (const btn of btns) { await btn.hover(); await page.waitForTimeout(100); await expect(demo).toBeInViewport(); await expect(demo).toHaveScreenshot({ threshold: 10 }); - i++; }
46-46: Evaluate the necessity of the timeoutAt line 46,
await page.waitForTimeout(100);introduces a delay before checking if the demo is in the viewport. Unless there is a specific reason for this delay (e.g., waiting for animations or asynchronous content), consider removing it to optimize test execution time.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (30)
tests/button/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/dynamic-disabled1-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/dynamic-disabled2-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/icon-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-1-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-10-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-11-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-12-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-13-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-14-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-15-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-16-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-17-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-18-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-2-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-3-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-4-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-5-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-6-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-7-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-8-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-button默认--UI截图-9-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-幽灵--UI截图-1-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-幽灵--UI截图-2-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-幽灵--UI截图-3-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-幽灵--UI截图-4-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-幽灵--UI截图-5-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/input组件xdesign规范-幽灵--UI截图-6-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/size-chromium-win32.pngis excluded by!**/*.pngtests/button/xdesign.spec.ts-snapshots/text-chromium-win32.pngis excluded by!**/*.png
Files selected for processing (1)
- tests/button/xdesign.spec.ts (1 hunks)
| test('button默认--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('button#basic-usage') | ||
| const demo = page.locator('#basic-usage .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('basic-usage.png') | ||
|
|
||
| // hover时截图 | ||
| const btns = await demo.locator('.tiny-button').all() | ||
| let i=1; | ||
| for(const btn of btns){ | ||
| await btn.hover() | ||
| await page.waitForTimeout(100) | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot({threshold:10}) | ||
| i++ | ||
| } | ||
| }) | ||
|
|
||
| test('幽灵--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('button#ghost') | ||
| const demo = page.locator('#ghost .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('basic-usage.png') | ||
|
|
||
| // hover时截图 | ||
| const btns = await demo.locator('.tiny-button').all() | ||
| let i=1; | ||
| for(const btn of btns){ | ||
| await btn.hover() | ||
| await page.waitForTimeout(100) | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot({threshold:10}) | ||
| i++ | ||
| } | ||
| }) | ||
|
|
||
| test('动态禁用--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('button#dynamic-disabled') | ||
| const demo = page.locator('#dynamic-disabled .pc-demo') | ||
| await page.waitForTimeout(100) | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('dynamic-disabled1.png') | ||
|
|
||
| const switchBtn = demo.locator('.tiny-switch') | ||
| await switchBtn.click() | ||
| await page.waitForTimeout(100) | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('dynamic-disabled2.png') | ||
| }) | ||
|
|
||
| test('图标--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('button#icon') | ||
| const demo = page.locator('#icon .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('icon.png') | ||
| }) | ||
|
|
||
| test('文字--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('button#text') | ||
| const demo = page.locator('#text .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('text.png') | ||
| }) | ||
|
|
||
| test('加载--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('button#loading') | ||
| const demo = page.locator('#loading .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('loading.png') | ||
| }) | ||
|
|
||
| test('尺寸--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) | ||
| await page.goto('button#size') | ||
| const demo = page.locator('#size .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('size.png') | ||
| }) |
There was a problem hiding this comment.
Refactor duplicated code to improve maintainability
There is a significant amount of duplicated code across the test cases, such as setting up page error handling, navigating to pages, locating demo elements, and taking screenshots. Consider refactoring this code by creating helper functions or utilizing beforeEach hooks to reduce redundancy and enhance maintainability.
tests/button/xdesign.spec.ts
Outdated
| @@ -0,0 +1,88 @@ | |||
| import { expect, test } from '@playwright/test' | |||
|
|
|||
| test.describe('input组件xdesign规范', () => { | |||
There was a problem hiding this comment.
Update test suite description to 'button' component
The test suite is currently described as 'input组件xdesign规范', but the tests are for the button component. Please update the description to accurately reflect the component being tested.
Apply this diff to correct the description:
-test.describe('input组件xdesign规范', () => {
+test.describe('button组件xdesign规范', () => {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| test.describe('input组件xdesign规范', () => { | |
| test.describe('button组件xdesign规范', () => { |
| const btns = await demo.locator('.tiny-button').all() | ||
| let i=1; | ||
| for(const btn of btns){ | ||
| await btn.hover() | ||
| await page.waitForTimeout(100) | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot({threshold:10}) | ||
| i++ | ||
| } |
There was a problem hiding this comment.
Specify unique filenames for screenshots in the hover loop
Similar to the previous test case, the screenshots in the hover loop do not have specified filenames, and the variable i is incremented but not used. Consider specifying unique filenames to prevent overwriting.
Apply this diff:
let i = 1;
for (const btn of btns) {
await btn.hover();
await page.waitForTimeout(100);
await expect(demo).toBeInViewport();
- await expect(demo).toHaveScreenshot({ threshold: 10 });
+ await expect(demo).toHaveScreenshot(`ghost-hover-${i}.png`, { threshold: 10 });
i++;
}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const btns = await demo.locator('.tiny-button').all() | |
| let i=1; | |
| for(const btn of btns){ | |
| await btn.hover() | |
| await page.waitForTimeout(100) | |
| await expect(demo).toBeInViewport() | |
| await expect(demo).toHaveScreenshot({threshold:10}) | |
| i++ | |
| } | |
| const btns = await demo.locator('.tiny-button').all() | |
| let i=1; | |
| for(const btn of btns){ | |
| await btn.hover() | |
| await page.waitForTimeout(100) | |
| await expect(demo).toBeInViewport() | |
| await expect(demo).toHaveScreenshot(`ghost-hover-${i}.png`, { threshold: 10 }) | |
| i++ | |
| } |
| await page.goto('button#ghost') | ||
| const demo = page.locator('#ghost .pc-demo') | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot('basic-usage.png') |
There was a problem hiding this comment.
Correct the screenshot filename
The screenshot filename 'basic-usage.png' does not match the test case '幽灵--UI截图'. It seems like a copy-paste error. Please update the filename to 'ghost.png' to correctly reflect the test case.
Apply this diff to correct the filename:
await expect(demo).toHaveScreenshot('basic-usage.png');
+ await expect(demo).toHaveScreenshot('ghost.png');Or replace the line:
- await expect(demo).toHaveScreenshot('basic-usage.png');
+ await expect(demo).toHaveScreenshot('ghost.png');Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| await expect(demo).toHaveScreenshot('basic-usage.png') | |
| await expect(demo).toHaveScreenshot('ghost.png') |
| const btns = await demo.locator('.tiny-button').all() | ||
| let i=1; | ||
| for(const btn of btns){ | ||
| await btn.hover() | ||
| await page.waitForTimeout(100) | ||
| await expect(demo).toBeInViewport() | ||
| await expect(demo).toHaveScreenshot({threshold:10}) | ||
| i++ | ||
| } |
There was a problem hiding this comment.
Specify unique filenames for screenshots in the hover loop
Within the hover loop, screenshots are taken without specifying filenames, and the variable i is incremented but not used. This may cause screenshots to overwrite each other or not be saved properly. Consider using i to create unique filenames for each screenshot.
Apply this diff to specify unique filenames:
let i = 1;
for (const btn of btns) {
await btn.hover();
await page.waitForTimeout(100);
await expect(demo).toBeInViewport();
- await expect(demo).toHaveScreenshot({ threshold: 10 });
+ await expect(demo).toHaveScreenshot(`basic-usage-hover-${i}.png`, { threshold: 10 });
i++;
}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const btns = await demo.locator('.tiny-button').all() | |
| let i=1; | |
| for(const btn of btns){ | |
| await btn.hover() | |
| await page.waitForTimeout(100) | |
| await expect(demo).toBeInViewport() | |
| await expect(demo).toHaveScreenshot({threshold:10}) | |
| i++ | |
| } | |
| const btns = await demo.locator('.tiny-button').all() | |
| let i=1; | |
| for(const btn of btns){ | |
| await btn.hover() | |
| await page.waitForTimeout(100) | |
| await expect(demo).toBeInViewport() | |
| await expect(demo).toHaveScreenshot(`basic-usage-hover-${i}.png`, { threshold: 10 }) | |
| i++ | |
| } |
tests/button/xdesign.spec.ts
Outdated
| @@ -0,0 +1,88 @@ | |||
| import { expect, test } from '@playwright/test' | |||
|
|
|||
| test.describe('input组件xdesign规范', () => { | |||
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Bug Fixes