tiny-vue/examples/sites/demos/pc/app/form/label-position.spec.ts

36 lines
1.5 KiB
TypeScript

import { test, expect } from '@playwright/test'
test('测试表单文本对齐', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('form#label-position')
const demo = page.locator('#label-position')
const form = demo.locator('.tiny-form')
const formItem = form.locator('.tiny-form-item')
const getBtnByText = (text: string) => demo.locator('.tiny-button-group').getByRole('button', { name: text })
const firstItemLabel = formItem.first().locator('.tiny-form-item__label')
const firstItemContent = formItem.first().locator('.tiny-form-item__content')
await getBtnByText('left').click()
await page.waitForTimeout(1000)
await expect(form).toHaveClass(/tiny-form--label-left/)
let labelBox = await firstItemLabel.boundingBox()
let contentBox = await firstItemContent.boundingBox()
expect(labelBox?.y).toEqual(contentBox?.y)
await getBtnByText('top').click()
await page.waitForTimeout(1000)
await expect(form).toHaveClass(/tiny-form--label-top/)
labelBox = await firstItemLabel.boundingBox()
contentBox = await firstItemContent.boundingBox()
expect(labelBox?.y).toBeLessThan(contentBox?.y || 0)
await getBtnByText('right').click()
await page.waitForTimeout(1000)
await expect(form).toHaveClass(/tiny-form--label-right/)
labelBox = await firstItemLabel.boundingBox()
contentBox = await firstItemContent.boundingBox()
expect(contentBox?.y).toEqual(labelBox?.y)
await expect(firstItemLabel).toHaveCSS('text-align', 'right')
})