test: update @playwright/test to 1.49.x and fix e2e case (#2792)

* test: update @playwright/test to 1.49.x

* test(grid): fix grid e2e test case

* test(grid): fix grid e2e test case

examples/docs/package.json

@@ -20,6 +20,6 @@
     "sortablejs": "1.15.0"
   },
   "devDependencies": {
-    "@playwright/test": "~1.42.0"
+    "@playwright/test": "catalog:"
   }
 }

examples/sites/demos/pc/app/grid/custom/column-fixed.spec.js

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

examples/sites/demos/pc/app/grid/custom/column-sort.spec.js

@@ -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')

examples/sites/demos/pc/app/grid/custom/column-visible-hidden.spec.js

@@ -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()
 })

examples/sites/demos/pc/app/grid/custom/multiple-column-sort.spec.js

@@ -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 科技有限公司')
 })

examples/sites/demos/pc/app/grid/custom/ordercolumn-local.spec.js

@@ -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
 })

examples/sites/demos/pc/app/grid/custom/reset-resizable.spec.js

@@ -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()

examples/sites/demos/pc/app/grid/edit/custom-editing.spec.js

@@ -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()
 })

examples/sites/demos/pc/app/grid/edit/editing.spec.js

@@ -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)
 

examples/sites/demos/pc/app/grid/edit/has-row-change.spec.js

@@ -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()
 })

examples/sites/demos/pc/app/grid/edit/revert-data.spec.js

@@ -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')
   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()

examples/sites/demos/pc/app/grid/edit/status-of-editing.spec.js

@@ -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/)

examples/sites/demos/pc/app/grid/edit/trigger-mode-for-editing.spec.js

@@ -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()
 
   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()
 })

examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.spec.js

@@ -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()

examples/sites/demos/pc/app/grid/editor/inner-editor.spec.js

@@ -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/)

examples/sites/demos/pc/app/grid/event/valid-error-event.spec.js

@@ -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()
 })

examples/sites/demos/pc/app/grid/faq/grid-in-dialog-box.spec.js

@@ -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()

examples/sites/demos/pc/app/grid/pager/show-save-msg.spec.js

@@ -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()

examples/sites/demos/pc/app/grid/toolbar/save-data.spec.js

@@ -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()

examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.spec.js

@@ -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()
 

examples/sites/demos/pc/app/grid/validation/before-submit-validation.spec.js

@@ -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')
   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()
 

examples/sites/demos/pc/app/grid/validation/custcomp.spec.js

@@ -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')
   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()
 })