tiny-vue/examples/sites/demos/pc/app/carousel/manual-play.spec.ts

30 lines
1.3 KiB
TypeScript

import { test, expect } from '@playwright/test'
test('手动轮播', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('carousel#manual-play')
const preview = page.locator('#manual-play')
const carouselItems = preview.locator('div.tiny-carousel__item')
const numButtons = preview.locator('#num').getByRole('button')
// 减一
await numButtons.first().click()
// 当前应该显示第二张幻灯片
await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
// 加一
await numButtons.nth(1).click()
// 当前应该显示第三张幻灯片
await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
// 点击上一张按钮
await page.getByRole('button', { name: '上一张' }).click()
// 当前应该显示第二张幻灯片
await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
// 点击下一张按钮
await page.getByRole('button', { name: '下一张' }).click()
// 当前应该显示第三张幻灯片
await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
// 指定一个序号
await page.getByRole('spinbutton').fill('4')
await page.getByRole('spinbutton').blur()
})