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

Author: gimmyhehe

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