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: update @playwright/test to 1.49.x and fix e2e case #2792

Merged
merged 3 commits into from
Jan 13, 2025
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
2 changes: 1 addition & 1 deletion examples/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@
"sortablejs": "1.15.0"
},
"devDependencies": {
"@playwright/test": "~1.42.0"
"@playwright/test": "catalog:"
}
}
5 changes: 3 additions & 2 deletions examples/sites/demos/pc/app/grid/custom/column-fixed.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import { test, expect } from '@playwright/test'

test('列冻结', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const custom = page.locator('.tiny-grid-custom')
await page.goto('grid-custom#custom-column-fixed')
await page.locator('.tiny-grid-custom__setting-btn').click()
await page.getByRole('row', { name: '员工数 显示 未冻结' }).getByTitle('未冻结').getByRole('img').click()
await page.getByRole('row', { name: '员工数 显示 左冻结' }).getByTitle('左冻结').getByRole('img').click()
await custom.getByRole('row', { name: '员工数 ' }).getByTitle('未冻结').getByRole('img').click()
await custom.getByRole('row', { name: '员工数' }).getByTitle('左冻结').getByRole('img').click()
await page.getByRole('button', { name: '确定' }).click()
await expect(page.getByRole('cell', { name: '员工数' })).toHaveCSS('right', '0px')
})
3 changes: 2 additions & 1 deletion examples/sites/demos/pc/app/grid/custom/column-sort.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ import { test, expect } from '@playwright/test'

test('个性化排序测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const custom = page.locator('.tiny-grid-custom')
await page.goto('grid-custom#custom-column-sort')
await page.locator('.tiny-grid-custom__setting-btn').click()
await page.getByRole('row', { name: '员工数 显示 未排序 未冻结' }).getByTitle('未排序').getByRole('img').click()
await custom.getByRole('row', { name: '员工数' }).getByTitle('未排序').getByRole('img').click()
await page.getByRole('button', { name: '确定' }).click()
await page.waitForTimeout(200)
const sortBtn = await page.getByRole('cell', { name: '员工数' }).getByRole('img')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ import { test, expect } from '@playwright/test'

test('列显示隐藏', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const custom = page.locator('.tiny-grid-custom')
await page.goto('grid-custom#custom-column-visible-hidden')
await page.locator('.tiny-grid-custom__setting-btn').click()
await page.getByRole('row', { name: '员工数 显示 未冻结' }).getByTitle('显示').getByRole('img').click()
await page.getByRole('button', { name: '确定' }).click()
await custom.getByRole('row', { name: '员工数' }).getByTitle('显示').getByRole('img').click()
await custom.getByRole('button', { name: '确定' }).click()
await expect(page.getByRole('cell', { name: '员工数' })).not.toBeVisible()
})
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,17 @@ import { test, expect } from '@playwright/test'

test('多列排序', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const custom = page.locator('.tiny-grid-custom')
await page.goto('grid-custom#custom-multiple-column-sort')
await page.locator('.tiny-grid-custom__setting-btn').first().click()
await page.getByRole('row', { name: '员工数 显示 未排序 未冻结' }).getByTitle('未排序').locator('path').click()
await page.getByTitle('未排序').locator('path').click()
await page.getByRole('button', { name: '确定' }).click()
await custom.getByRole('row', { name: '员工数' }).getByTitle('未排序').locator('path').click()
await custom.getByTitle('未排序').locator('path').click()
await custom.getByRole('button', { name: '确定' }).click()
await expect(page.locator('.tiny-grid-body__row').nth(3)).toContainText('GFD 科技有限公司')

await page.locator('.tiny-grid-custom__setting-btn').nth(1).click()
await page.getByRole('row', { name: '员工数 显示 未排序 未冻结' }).getByTitle('未排序').getByRole('img').click()
await page.getByTitle('未排序').getByRole('img').click()
await page.getByRole('button', { name: '确定' }).click()
await custom.getByRole('row', { name: '员工数' }).getByTitle('未排序').getByRole('img').click()
await custom.getByTitle('未排序').getByRole('img').click()
await custom.getByRole('button', { name: '确定' }).click()
await expect(page.locator('.tiny-grid-body__row').nth(10)).toContainText('YHN 科技有限公司')
})
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,19 @@ import { test, expect } from '@playwright/test'

test('个性化按钮点击事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const custom = page.locator('.tiny-grid-custom')
await page.goto('grid-custom#custom-ordercolumn-local')
await page.locator('.tiny-grid-custom__setting-btn').click()
await page.getByRole('cell', { name: '显示 未冻结' }).getByTitle('显示').getByRole('img').click()
await page.getByRole('button', { name: '确定' }).click()
await custom.locator('.tiny-grid-body__row').first().getByTitle('显示').getByRole('img').click()
await custom.getByRole('button', { name: '确定' }).click()
await expect(
page.getByText('点击了确认按钮{"sortType":"page","pageSize":10,"columns":[{"property":"name","order":nu')
).toBeVisible()
await page.getByRole('button', { name: '确定' }).click()
await page.locator('.tiny-grid-custom__setting-btn').click()
await page.getByRole('button', { name: '重置' }).click()
await custom.getByRole('button', { name: '重置' }).click()
await expect(page.getByText('点击了重置按钮')).toBeVisible()
await page.getByRole('button', { name: '确定' }).nth(1).click()
await page.getByRole('button', { name: '取消' }).click()
await custom.getByRole('button', { name: '取消' }).click()
await expect(page.getByText('点击了取消按钮 undefined')).toBeVisible
})
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,12 @@ test.describe('手动重置列操作', () => {

test('重置列隐藏', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const custom = page.locator('.tiny-grid-custom')

await page.goto('grid-custom#custom-reset-resizable')
await page.locator('.tiny-grid-custom__setting-btn').click()
await page.getByRole('row', { name: '员工数 显示 未冻结' }).getByTitle('显示').getByRole('img').click()
await page.getByRole('button', { name: '确定' }).click()
await custom.getByRole('row', { name: '员工数' }).getByTitle('显示').getByRole('img').click()
await custom.getByRole('button', { name: '确定' }).click()
const thHeader = page.locator('th.tiny-grid-header__column').nth(1)
await expect(thHeader).toContainText('地址')
await page.getByRole('button', { name: '重置列的隐藏操作' }).click()
Expand Down
8 changes: 1 addition & 7 deletions examples/sites/demos/pc/app/grid/edit/custom-editing.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,5 @@ test('自定义编辑规则', async ({ page }) => {
await page.getByText('GFD 科技 YX 公司').first().click()
await expect(page.getByText('GFD 科技 YX 公司').first()).toBeVisible()
await page.getByText('WWWW 科技 YX 公司').first().click()
await expect(
page
.getByRole('row', {
name: '2 华南区 2014-02-14 14:14:14 1300 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
).toBeVisible()
await expect(page.locator('.tiny-grid-default-input')).toBeVisible()
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Add timeout and state assertions for better test stability.

The current visibility check might be flaky if multiple inputs exist or if the input's visibility is delayed. Consider:

  1. Adding a timeout for slow rendering
  2. Ensuring correct input state before proceeding
- await expect(page.locator('.tiny-grid-default-input')).toBeVisible()
+ await expect(page.locator('.tiny-grid-default-input'))
+   .toBeVisible({ timeout: 5000 })
+ await expect(page.locator('.tiny-grid-default-input'))
+   .toBeEditable()
📝 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.

Suggested change
await expect(page.locator('.tiny-grid-default-input')).toBeVisible()
await expect(page.locator('.tiny-grid-default-input'))
.toBeVisible({ timeout: 5000 })
await expect(page.locator('.tiny-grid-default-input'))
.toBeEditable()

})
13 changes: 1 addition & 12 deletions examples/sites/demos/pc/app/grid/edit/editing.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,7 @@ test('编辑方式', async ({ page }) => {
await page.goto('grid-edit#edit-editing')
// 单元格编辑
await page.getByRole('cell', { name: 'GFD 科技 YX 公司' }).first().click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('GFD 科技 Y 水电费第三方 X 公司')
await page.locator('.tiny-grid-default-input').fill('GFD 科技 Y 水电费第三方 X 公司')
await page.getByRole('heading', { name: '单元格编辑:' }).click()
await expect(await page.getByText('GFD 科技 Y 水电费第三方 X 公司')).toHaveCount(2)

Expand Down
14 changes: 5 additions & 9 deletions examples/sites/demos/pc/app/grid/edit/has-row-change.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,14 @@ import { test, expect } from '@playwright/test'

test('检查数据是否改变', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const demo = page.locator('#edit-has-row-change')
await page.goto('grid-edit#edit-has-row-change')
await page.getByText('GFD 科技 YX 公司').first().click()
await page.getByRole('row', { name: '1 保存' }).locator('input[type="text"]').fill('sdf')
await page.getByRole('row', { name: '1 保存' }).getByRole('button', { name: '保存' }).click()
await demo.getByText('GFD 科技 YX 公司').first().click()
await demo.locator('.tiny-grid-body__row').first().locator('input[type="text"]').fill('sdf')
await demo.locator('.tiny-grid-body__row').first().getByRole('button', { name: '保存' }).click()
await expect(page.getByText('保存成功!')).toBeVisible()
await page.getByRole('button', { name: '确定' }).click()
await page
.getByRole('row', {
name: '2 WWWW 科技 YX 公司 华南区 深圳福田区 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。 保存'
})
.getByRole('button', { name: '保存' })
.click()
await demo.locator('.tiny-grid-body__row').nth(1).getByRole('button', { name: '保存' }).click()
await expect(page.getByText('当前数据未改变!')).toBeVisible()
await page.getByRole('button', { name: '确定' }).click()
})
14 changes: 2 additions & 12 deletions examples/sites/demos/pc/app/grid/edit/revert-data.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,9 @@ test('表格编辑还原更改', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-edit#edit-revert-data')
await page.getByText('GFD 科技 YX 公司').first().click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。 恢复'
})
.getByRole('textbox')
.fill('sss')
await page.locator('.tiny-grid-default-input').fill('sss')
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Add wait conditions and distinguish between input fields.

The current implementation might be flaky because:

  1. It's not clear which .tiny-grid-default-input is being filled
  2. There are no wait conditions between fill operations
- await page.locator('.tiny-grid-default-input').fill('sss')
+ await page.locator('.tiny-grid-default-input').first().waitFor()
+ await page.locator('.tiny-grid-default-input').first().fill('sss')
  await page.getByText('RFV 有限责任公司').first().click()
- await page.locator('.tiny-grid-default-input').fill('eee')
+ await page.locator('.tiny-grid-default-input').nth(1).waitFor()
+ await page.locator('.tiny-grid-default-input').nth(1).fill('eee')

Also applies to: 9-9

await page.getByText('RFV 有限责任公司').first().click()
await page
.getByRole('row', {
name: '3 华南区 中山市 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。 恢复'
})
.getByRole('textbox')
.fill('eee')
await page.locator('.tiny-grid-default-input').fill('eee')
await page.locator('#edit-revert-data').getByRole('cell', { name: '名称' }).click()
await page.getByRole('button', { name: '恢复全部' }).click()
await expect(page.getByText('GFD 科技 YX 公司').first()).toBeVisible()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@ test('开启编辑状态', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-edit#edit-status-of-editing')
await page.getByText('GFD 科技 YX 公司').first().click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('sdfdf')
await page.locator('.tiny-grid-default-input').fill('sdfdf')
await page.getByRole('heading', { name: '开启编辑状态:' }).click()
await expect(page.getByRole('cell', { name: 'sdfdf' }).nth(0)).toHaveClass(/col__valid-success/)
await expect(page.getByRole('cell', { name: 'sdfdf' }).nth(1)).not.toHaveClass(/col__valid-success/)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,9 @@ test('触发编辑方式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-edit#edit-trigger-mode-for-editing')
await page.getByText('GFD 科技 YX 公司').first().click()
await expect(
page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
).toBeVisible()
await expect(page.locator('.tiny-grid-default-input')).toBeVisible()
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 test reliability with more specific selectors.

Using the same generic selector .tiny-grid-default-input for different inputs could lead to flaky tests. The test can't distinguish which input becomes visible after each action.

Consider using more specific selectors:

- await expect(page.locator('.tiny-grid-default-input')).toBeVisible()
+ await expect(page.locator('[data-testid="grid-input-company1"]')).toBeVisible()

- await expect(page.locator('.tiny-grid-default-input')).toBeVisible()
+ await expect(page.locator('[data-testid="grid-input-company2"]')).toBeVisible()

Also applies to: 11-11


await page.getByText('WWWW 科技 YX 公司').nth(1).dblclick()

await expect(
page
.getByRole('row', {
name: '2 华南区 深圳福田区 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
).toBeVisible()
await expect(page.locator('.tiny-grid-default-input')).toBeVisible()
})
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,12 @@ import { test, expect } from '@playwright/test'

test('手动触发编辑', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const demo = page.locator('#edit-trigger-mode-hm-editing')
await page.goto('grid-edit#edit-trigger-mode-hm-editing')
await page.getByText('GFD 科技 YX 公司').first().click()
await expect(page.getByText('GFD 科技 YX 公司').first()).toBeVisible()
await page
.getByRole('row', {
name: '1 GFD 科技 YX 公司 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。 编辑'
})
.getByRole('button', { name: '编辑' })
.click()
await expect(
page.getByRole('row', { name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863' }).getByRole('textbox')
).toBeVisible()
await demo.locator('.tiny-grid-body__row').first().getByRole('button', { name: '编辑' }).click()
await expect(page.locator('.tiny-grid-default-input')).toBeVisible()

await page.getByRole('row', { name: '3 RFV' }).getByRole('button').click()
await expect(page.getByRole('combobox')).toBeVisible()
Expand Down
7 changes: 2 additions & 5 deletions examples/sites/demos/pc/app/grid/editor/inner-editor.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,10 @@ import { test, expect } from '@playwright/test'

test('Grid-编辑器 - 内置编辑器', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const demo = page.locator('#editor-inner-editor')
await page.goto('grid-editor#grid_Example-gridEdit-inner-editor')
await page.getByText('GFD 科技 YX 公司').first().click()
const input = page
.getByRole('row', {
name: '1 800 华东区 2014-04-30 00:56:00 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
const input = demo.locator('.tiny-grid-body__row input').first()

// 内置编辑器
await expect(input).toHaveClass(/tiny-grid-default-input/)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@ test('校验不通过事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-event#event-valid-error-event')
await page.getByText('GFD 科技 YX 公司').first().click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.clear()
await page.locator('.tiny-grid-default-input').clear()
await page.waitForTimeout(400)
await expect(page.getByText('触发校验不通过事件').first()).toBeVisible()
Comment on lines 8 to 9
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Replace fixed timeout with waitForSelector.

Using waitForTimeout is discouraged in Playwright as it makes tests flaky. Instead, wait for the validation message to appear using waitForSelector.

-  await page.waitForTimeout(400)
-  await expect(page.getByText('触发校验不通过事件').first()).toBeVisible()
+  await expect(page.getByText('触发校验不通过事件').first()).toBeVisible({ timeout: 5000 })
📝 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.

Suggested change
await page.waitForTimeout(400)
await expect(page.getByText('触发校验不通过事件').first()).toBeVisible()
await expect(page.getByText('触发校验不通过事件').first()).toBeVisible({ timeout: 5000 })

})
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,7 @@ test('弹窗框中表格编辑器失焦功能测试', async ({ page }) => {
await page.goto('grid-faq#faq-grid-in-dialog-box')
await page.getByRole('button', { name: '弹出 Dialog false' }).click()
await page.getByText('GFD 科技有限公司').first().click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('ss')
await page.locator('.tiny-grid-default-input').fill('ss')
await page.getByText('消息').click()

await expect(page.getByText('ss').first()).toBeVisible()
Expand Down
7 changes: 1 addition & 6 deletions examples/sites/demos/pc/app/grid/pager/show-save-msg.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@ test('保存', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-pager#pager-show-save-msg')
await page.getByText('GFD 科技 YX 公司').first().click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('GFD 科技 YX 公司 ds')
await page.locator('.tiny-grid-default-input').fill('GFD 科技 YX 公司 ds')
await page.locator('#pager-show-save-msg').getByRole('cell', { name: '名称' }).click()
await page.getByRole('listitem').filter({ hasText: '2' }).click()
await expect(page.getByText('有修改的数据,是否要保存?')).toBeVisible()
Expand Down
7 changes: 1 addition & 6 deletions examples/sites/demos/pc/app/grid/toolbar/save-data.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@ test('服务端数据保存和删除方法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-toolbar#toolbar-save-data')
await page.getByText('GFD 科技 YX 公司').first().click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('dsfds')
await page.locator('.tiny-grid-default-input').fill('dsfds')
await page.getByRole('row', { name: '名称 区域 地址 公司简介' }).getByText('名称').click()
await page.getByRole('button', { name: '保存' }).click()
await expect(page.getByText('dsfds').first()).toBeVisible()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@ test.describe('树表增删改功能', () => {
.first()
.click()
await page.getByRole('row', { name: '3 WWWW 科技股份有限子公司 华南区 720' }).getByText('华南区').first().click()
await page.getByRole('row', { name: '3 WWWW 科技股份有限子公司 720' }).getByRole('textbox').first().click()
await page.getByRole('row', { name: '3 WWWW 科技股份有限子公司 720' }).getByRole('textbox').fill('华南区 ee')
await page.locator('.tiny-grid-default-input').fill('华南区 ee')
await page.getByText('WWWW 科技 YX 公司').first().click()
await page.getByRole('button', { name: '获取修改' }).click()

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,11 @@ import { test, expect } from '@playwright/test'

test('提交前校验', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const demo = page.locator('#validation-before-submit-validation')
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Maintain consistency in locator usage and add wait conditions.

The test mixes page and demo locators inconsistently. Also, missing wait conditions could make the test flaky.

  const demo = page.locator('#validation-before-submit-validation')
  await page.goto('grid-validation#validation-before-submit-validation')
+ await demo.waitFor()
  await demo.getByText('GFD 科技 YX 公司').first().click()
+ await demo.locator('.tiny-grid-default-input').waitFor()
  await demo.locator('.tiny-grid-default-input').fill('')

- await page.getByRole('button', { name: '提交数据' }).click()
+ await demo.getByRole('button', { name: '提交数据' }).click()

Also applies to: 7-9

await page.goto('grid-validation#validation-before-submit-validation')
await page.getByText('GFD 科技 YX 公司').first().click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('')
await demo.getByText('GFD 科技 YX 公司').first().click()
await demo.locator('.tiny-grid-default-input').fill('')

await page.getByRole('button', { name: '提交数据' }).click()
await expect(page.getByText('校验不通过', { exact: true })).toBeVisible()

Expand Down
8 changes: 2 additions & 6 deletions examples/sites/demos/pc/app/grid/validation/custcomp.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,10 @@ import { test, expect } from '@playwright/test'

test('自定义组件与插槽编辑器校验', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const demo = page.locator('#validation-custcomp')
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Verify correct row selection before input interaction.

The current implementation doesn't verify we're interacting with the correct row. Add assertions to ensure test reliability:

const demo = page.locator('#validation-custcomp')
await page.goto('grid-validation#validation-custcomp')
await page.getByText('GFD 科技 YX 公司').first().click()
+ // Ensure correct row is selected
+ await expect(page.locator('tr.row-selected'))
+   .toContainText('GFD 科技 YX 公司')
await demo.locator('.tiny-grid-default-input').fill('')

Also applies to: 8-8

await page.goto('grid-validation#validation-custcomp')
await page.getByText('GFD 科技 YX 公司').first().click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚,是国家 863 项目的参与者,并被政府认定为“高新技术企业”。 1234567890'
})
.getByRole('textbox')
.fill('')
await demo.locator('.tiny-grid-default-input').fill('')

await expect(page.getByRole('tooltip', { name: '必填' })).toBeVisible()
})
Loading
Loading