forked from opentiny/tiny-vue
74 lines
3.9 KiB
JavaScript
74 lines
3.9 KiB
JavaScript
import { test, expect } from '@playwright/test'
|
|
|
|
test('测试表单禁用', async ({ page }) => {
|
|
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
|
await page.goto('form#form-disabled')
|
|
|
|
const demo = page.locator('#form-disabled')
|
|
const form = demo.locator('.tiny-form')
|
|
const switchBtn = demo.locator('.tiny-switch').first()
|
|
const startButton = demo.getByRole('button', { name: '启用表单' })
|
|
const formItem = form.locator('.tiny-form-item')
|
|
const slider = formItem.nth(18).locator('.tiny-slider__handle')
|
|
|
|
// 设置视口宽高，否则滑动不在视口中则无法拖动
|
|
await page.setViewportSize({
|
|
width: 1400,
|
|
height: 1500
|
|
})
|
|
|
|
await switchBtn.click()
|
|
await expect(formItem.first().locator('input')).toBeDisabled()
|
|
await expect(formItem.nth(1).locator('input')).toBeDisabled()
|
|
await expect(formItem.nth(2).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
|
|
await expect(formItem.nth(3).locator('.tiny-switch')).toHaveClass(/tiny-switch-disabled/)
|
|
await expect(formItem.nth(4).locator('input').first()).toBeDisabled()
|
|
await expect(formItem.nth(5).locator('input').nth(1)).toBeDisabled()
|
|
await expect(formItem.nth(6).locator('input').first()).toBeDisabled()
|
|
await expect(formItem.nth(7).locator('input').first()).toBeDisabled()
|
|
await expect(formItem.nth(8).locator('input').first()).toBeDisabled()
|
|
await expect(formItem.nth(9).locator('input')).toBeDisabled()
|
|
await expect(formItem.nth(10).locator('input')).toBeDisabled()
|
|
await expect(formItem.nth(11).locator('textarea')).toBeDisabled()
|
|
await expect(formItem.nth(12).locator('input')).toBeDisabled()
|
|
await expect(formItem.nth(13).locator('button').first()).toHaveClass(/disabled/)
|
|
await expect(formItem.nth(14).locator('input')).toBeDisabled()
|
|
await expect(formItem.nth(15).locator('input').first()).toBeDisabled()
|
|
await expect(formItem.nth(17).locator('input').first()).toBeDisabled()
|
|
// 尝试拖到滑块,应是无法拖动状态
|
|
const { x, y, height } = await slider.boundingBox()
|
|
await page.mouse.move(x, y + height / 2)
|
|
await page.mouse.down()
|
|
await page.mouse.move(x + 50, y + height / 2)
|
|
await page.mouse.up()
|
|
const { x: newX } = await slider.boundingBox()
|
|
expect(newX).toEqual(x)
|
|
|
|
await switchBtn.click()
|
|
await expect(formItem.first().locator('input')).not.toBeDisabled()
|
|
await expect(formItem.nth(1).locator('input')).not.toBeDisabled()
|
|
await expect(formItem.nth(2).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)
|
|
await expect(formItem.nth(3).locator('.tiny-switch')).not.toHaveClass(/tiny-switch-disabled/)
|
|
await expect(formItem.nth(4).locator('input').first()).not.toBeDisabled()
|
|
await expect(formItem.nth(5).locator('input').nth(1)).not.toBeDisabled()
|
|
await expect(formItem.nth(6).locator('input').first()).not.toBeDisabled()
|
|
await expect(formItem.nth(7).locator('input').first()).not.toBeDisabled()
|
|
await expect(formItem.nth(8).locator('input').first()).not.toBeDisabled()
|
|
await expect(formItem.nth(9).locator('input')).not.toBeDisabled()
|
|
await expect(formItem.nth(10).locator('input')).not.toBeDisabled()
|
|
await expect(formItem.nth(11).locator('textarea')).not.toBeDisabled()
|
|
await expect(formItem.nth(12).locator('input')).not.toBeDisabled()
|
|
await expect(formItem.nth(13).locator('button').first()).not.toHaveClass(/disabled/)
|
|
await expect(formItem.nth(14).locator('input')).not.toBeDisabled()
|
|
await expect(formItem.nth(15).locator('input').first()).not.toBeDisabled()
|
|
await expect(formItem.nth(17).locator('input').first()).not.toBeDisabled()
|
|
// 尝试拖到滑块,应是可以拖动状态
|
|
const sliderBox = await slider.boundingBox()
|
|
await page.mouse.move(sliderBox.x, sliderBox.y + sliderBox.height / 2)
|
|
await page.mouse.down()
|
|
await page.mouse.move(sliderBox.x + 50, sliderBox.y + sliderBox.height / 2)
|
|
await page.mouse.up()
|
|
const afterSliderBox = await slider.boundingBox()
|
|
expect(sliderBox.x).toBeLessThan(afterSliderBox.x)
|
|
})
|