forked from opentiny/tiny-vue
94 lines
4.2 KiB
TypeScript
94 lines
4.2 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
||
|
||
test('测试表单校验规则', async ({ page }) => {
|
||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||
await page.goto('form#form-validation')
|
||
|
||
const demo = page.locator('#form-validation')
|
||
const form = demo.locator('.tiny-form')
|
||
|
||
// 直接提交，查看是否出现检验提示
|
||
await form.getByRole('button', { name: '提交' }).click()
|
||
await expect(page.getByRole('tooltip', { name: '必填' }).first()).toBeVisible()
|
||
await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).toBeVisible()
|
||
await expect(page.getByRole('tooltip', { name: '必填' }).nth(1)).toBeVisible()
|
||
await expect(page.getByRole('tooltip', { name: '必填' }).nth(2)).toBeVisible()
|
||
await expect(page.getByRole('tooltip', { name: '必填 2~11 之间的数字' })).toBeVisible()
|
||
await expect(page.getByRole('tooltip', { name: '必填1.1.1.1' })).toBeVisible()
|
||
})
|
||
|
||
test('测试表单输入变化和失焦是否出现校验', async ({ page }) => {
|
||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||
await page.goto('form#form-validation')
|
||
|
||
const demo = page.locator('#form-validation')
|
||
const form = demo.locator('.tiny-form')
|
||
const formItem = form.locator('.tiny-form-item')
|
||
const requiredTip = page.getByRole('tooltip', { name: '必填' })
|
||
|
||
// 对长度有要求的检验
|
||
const firstInput = formItem.first().locator('input')
|
||
await firstInput.click()
|
||
await firstInput.blur()
|
||
await expect(requiredTip.first()).toBeVisible()
|
||
await firstInput.fill('1')
|
||
await expect(requiredTip.first()).not.toBeVisible()
|
||
await expect(page.getByRole('tooltip', { name: '长度必须不小于2' })).toBeVisible()
|
||
await firstInput.fill('111')
|
||
await expect(page.getByRole('tooltip', { name: '长度必须不小于2' })).not.toBeVisible()
|
||
|
||
// 日期选择器的校验
|
||
const datePicker = form.locator('.tiny-date-editor').first().locator('input')
|
||
await datePicker.click()
|
||
// 点击第一项输入去触发失焦，调用blur事件不会将日期选择器收起
|
||
await firstInput.click()
|
||
await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).toBeVisible()
|
||
await datePicker.click()
|
||
await page.locator('.tiny-date-picker .tiny-date-table__row').getByText('15').first().click()
|
||
await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).not.toBeVisible()
|
||
|
||
// url输入框
|
||
const urlInput = formItem.nth(2).locator('input')
|
||
const validUrl = 'https://test.com'
|
||
urlInput.fill('1111')
|
||
await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).toBeVisible()
|
||
urlInput.fill(validUrl)
|
||
await expect(page.getByRole('tooltip', { name: '非法 URL 地址' })).not.toBeVisible()
|
||
|
||
// email输入框
|
||
const emailInput = formItem.nth(4).locator('input')
|
||
const validEmail = '111@test.com'
|
||
emailInput.fill('1111')
|
||
await expect(page.getByRole('tooltip', { name: '非法邮件地址' })).toBeVisible()
|
||
emailInput.fill(validEmail)
|
||
await expect(page.getByRole('tooltip', { name: '非法邮件地址' })).not.toBeVisible()
|
||
|
||
// numeric输入
|
||
const numeric = formItem.locator('.tiny-numeric').first()
|
||
const increase = numeric.locator('.tiny-numeric__increase')
|
||
await increase.click()
|
||
await expect(page.getByRole('tooltip', { name: '必填 2~11 之间的数字' })).toBeVisible()
|
||
await increase.click()
|
||
await expect(page.getByRole('tooltip', { name: '必填 2~11 之间的数字' })).not.toBeVisible()
|
||
|
||
// ip输入
|
||
const ipInput = formItem.locator('.tiny-ip-address input')
|
||
await ipInput.nth(0).fill('2')
|
||
await ipInput.nth(1).fill('2')
|
||
await ipInput.nth(2).fill('2')
|
||
await ipInput.nth(3).fill('2')
|
||
await expect(page.getByRole('tooltip', { name: '必填1.1.1.1' })).toBeVisible()
|
||
await ipInput.nth(0).fill('1')
|
||
await ipInput.nth(1).fill('1')
|
||
await ipInput.nth(2).fill('1')
|
||
await ipInput.nth(3).fill('1')
|
||
await expect(page.getByRole('tooltip', { name: '必填1.1.1.1' })).not.toBeVisible()
|
||
|
||
// 提交成功
|
||
const submitButton = form.getByRole('button', { name: '提交' })
|
||
const successModal = page.locator('.tiny-modal__box').getByText('提交成功')
|
||
await formItem.locator('.tiny-radio').first().click()
|
||
await submitButton.click()
|
||
await expect(successModal).toBeVisible()
|
||
})
|