test(e2e): add radio UI e2e test #37
Conversation
WalkthroughThe changes introduce a new test suite for the radio component located in Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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: 1
Outside diff range and nitpick comments (1)
tests/radio/xdesign.spec.ts (1)
12-12: Use more resilient selectors instead of hard-coded textUsing hard-coded text strings like
'选项二','公交', and'地铁'in your locators can make tests fragile if the text changes or if localization is implemented. Consider using data attributes or roles to make your selectors more robust.For example, assign data attributes to your elements in the application code:
<label data-test-id="option-two">选项二</label>Then, update your test selectors:
-await page.getByRole('radio', { name: '选项二' }).hover() +await page.locator('[data-test-id="option-two"]').hover()Also applies to: 25-25, 29-29
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (8)
tests/radio/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.pngis excluded by!**/*.pngtests/radio/xdesign.spec.ts-snapshots/checked-hover-chromium-win32.pngis excluded by!**/*.pngtests/radio/xdesign.spec.ts-snapshots/disabled-chromium-win32.pngis excluded by!**/*.pngtests/radio/xdesign.spec.ts-snapshots/group-hover-chromium-win32.pngis excluded by!**/*.pngtests/radio/xdesign.spec.ts-snapshots/hover-chromium-win32.pngis excluded by!**/*.pngtests/radio/xdesign.spec.ts-snapshots/radio-group-chromium-win32.pngis excluded by!**/*.pngtests/radio/xdesign.spec.ts-snapshots/size-chromium-win32.pngis excluded by!**/*.pngtests/radio/xdesign.spec.ts-snapshots/vertical-chromium-win32.pngis excluded by!**/*.png
Files selected for processing (1)
- tests/radio/xdesign.spec.ts (1 hunks)
Additional comments not posted (1)
tests/radio/xdesign.spec.ts (1)
6-6: Verify thatpage.gotonavigations work with relative URLsThe
page.gotomethod uses relative URLs like'radio#basic-usage'. Ensure that your Playwright configuration includes abaseURLso that these relative navigations resolve correctly. Otherwise, the tests might fail to load the intended pages.Run the following script to check if a
baseURLis set in your Playwright configuration:Also applies to: 19-19, 36-36, 44-44, 52-52
Verification successful
To gather more information about how the
baseURLis defined and used in the Playwright configuration, let's run another script to view more context:
Relative URL navigation with
page.gotois correctly configuredThe Playwright configuration file (
playwright.config.ts) properly sets up thebaseURLfor relative URL navigation. ThebaseURLis defined as${origin}/tiny-vue/zh-CN/smb-theme/components/, whereoriginis set to'http://localhost:3101'. This configuration ensures that relative URLs like'radio#basic-usage'used inpage.goto()will resolve correctly.Key points:
- The
baseURLis correctly defined and exported in the configuration.- It points to a local development server, which is appropriate for testing.
- The configuration is set up for a Vue.js application, likely using a custom testing framework.
No changes are required for the
page.gotocalls with relative URLs in your tests.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that 'baseURL' is set in Playwright configuration. # Test: Search for 'baseURL' in Playwright config files. # Expect: 'baseURL' to be defined in the configuration. fd -e ts -e js -e mjs --max-depth 2 'playwright.config' --exec grep -E 'baseURL.*='Length of output: 148
Script:
#!/bin/bash # Description: View context around 'baseURL' definition in Playwright config # Find the Playwright config file config_file=$(fd -e ts -e js -e mjs --max-depth 2 'playwright.config' | head -n 1) # If config file is found, show context around baseURL if [ -n "$config_file" ]; then echo "Contents of $config_file:" echo "------------------------" cat "$config_file" else echo "Playwright config file not found." fiLength of output: 1012
|
|
||
| test.describe('radio组件xdesign规范', () => { | ||
| test('默认--UI截图', async ({ page }) => { | ||
| page.on('pageerror', (exception) => expect(exception).toBeNull()) |
There was a problem hiding this comment.
Refactor to use a beforeEach hook for setting up the page error handler
Currently, each test sets up the same page error handler individually. To reduce code duplication and improve maintainability, consider moving this event listener into a beforeEach hook.
Apply this diff to refactor the code:
+test.beforeEach(async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+})
- test('默认--UI截图', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
// ... rest of the test
- test('单选框组--UI截图', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
// ... rest of the test
- test('禁用--UI截图', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
// ... rest of the test
- test('垂直布局--UI截图', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
// ... rest of the test
- test('尺寸--UI截图', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
// ... rest of the testAlso applies to: 18-18, 35-35, 43-43, 51-51
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
Documentation