forked from opentiny/tiny-vue
test(fullscreen):[fullscreen] update fullscreen E2E test (#1131)
* test(fullscreen):[fullscreen] update fullscreen E2E test * test(fullscreen):[fullscreen] update fullscreen E2E test * test(fullscreen):[fullscreen] update fullscreen E2E test
This commit is contained in:
wuyiping0628
GitHub
parent
e11d89a334
commit
cdc4b1c223
|
|
@ -1,52 +1,37 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('Fullscreen 函数式使用', async ({ page }) => {
|
||||
test('函数式使用', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('fullscreen#example-api')
|
||||
|
||||
const pageOnly = page.getByLabel('pageOnly')
|
||||
const teleport = page.getByLabel('teleport')
|
||||
const fullBtn = page.getByRole('button', { name: 'Request Fullscreen' })
|
||||
const exitFullBtn = page.getByRole('button', { name: 'Exit Fullscreen' })
|
||||
const smallImg = page.locator('img').first()
|
||||
const bigImg = page.locator('img').last()
|
||||
const smallImg = page.locator('.tiny-fullscreen-wrapper img').nth(0)
|
||||
const bigImg = page.locator('.tiny-fullscreen-wrapper img').nth(1)
|
||||
|
||||
// 初始化完成，默认非全屏模式
|
||||
await expect(fullBtn).toBeVisible()
|
||||
await expect(exitFullBtn).toHaveCount(0)
|
||||
await expect(smallImg).not.toHaveCSS('display', 'none')
|
||||
await expect(bigImg).toHaveCSS('display', 'none')
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe(null)
|
||||
const document1 = await page.evaluate('document.fullscreenElement')
|
||||
await expect(document1).toBe(null)
|
||||
|
||||
// 点击Request Fullscreen按钮，图片全屏展示
|
||||
await fullBtn.click()
|
||||
await expect(smallImg).toHaveCSS('display', 'none')
|
||||
await expect(bigImg).not.toHaveCSS('display', 'none')
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe('ref: <Node>')
|
||||
|
||||
// 点击Exit Fullscreen按钮，退出全屏展示
|
||||
await exitFullBtn.click()
|
||||
await expect(smallImg).not.toHaveCSS('display', 'none')
|
||||
await expect(bigImg).toHaveCSS('display', 'none')
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe(null)
|
||||
|
||||
// pageOnly为true时，为网页全屏
|
||||
await pageOnly.check()
|
||||
await fullBtn.click()
|
||||
await expect(smallImg).toHaveCSS('display', 'none')
|
||||
await expect(bigImg).not.toHaveCSS('display', 'none')
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe(null)
|
||||
// 选取需要添加样式的元素并设置新的CSS属性
|
||||
await page.$eval('.tinyui-design-header', (el) => {
|
||||
el.setAttribute('style', 'display: none;')
|
||||
})
|
||||
|
||||
// pageOnly为false时，为浏览器全屏
|
||||
await exitFullBtn.click()
|
||||
await pageOnly.uncheck()
|
||||
// // 点击Exit Fullscreen按钮，退出全屏展示
|
||||
await fullBtn.click()
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe('ref: <Node>')
|
||||
await expect(smallImg).not.toHaveCSS('display', 'none')
|
||||
await expect(bigImg).toHaveCSS('display', 'none')
|
||||
|
||||
// teleport默认true，目标元素移到body下，反之false时不移动目标元素
|
||||
expect(await page.evaluate('document.fullscreenElement?.nodeName')).toBe('BODY') // 默认true时
|
||||
await exitFullBtn.click()
|
||||
await teleport.uncheck()
|
||||
await fullBtn.click()
|
||||
expect(await page.evaluate('document.fullscreenElement?.nodeName')).toBe('DIV')
|
||||
// TINY-TODO: 全屏时，按Esc键退出全屏图片有问题
|
||||
// TINY-TODO: 因全屏模式下获取不到元素 pageOnly teleport区别暂未测试
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,58 +5,41 @@ test('组件式使用', async ({ page }) => {
|
|||
await page.goto('fullscreen#example-component')
|
||||
|
||||
const pageOnly = page.getByLabel('pageOnly')
|
||||
const teleport = page.getByLabel('teleport')
|
||||
const fullBtn = page.getByRole('button', { name: 'Request Fullscreen' })
|
||||
const exitFullBtn = page.getByRole('button', { name: 'Exit Fullscreen' })
|
||||
const smallImg = page.locator('img').first()
|
||||
const bigImg = page.locator('img').last()
|
||||
const smallImg = page.locator('.tiny-fullscreen-wrapper img').nth(0)
|
||||
const bigImg = page.locator('.tiny-fullscreen-wrapper img').nth(1)
|
||||
|
||||
// 初始化完成，默认非全屏模式
|
||||
await expect(fullBtn).toBeVisible()
|
||||
await expect(exitFullBtn).toHaveCount(0)
|
||||
await expect(smallImg).not.toHaveCSS('display', 'none')
|
||||
await expect(bigImg).toHaveCSS('display', 'none')
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe(null)
|
||||
const document1 = await page.evaluate('document.fullscreenElement')
|
||||
await expect(document1).toBe(null)
|
||||
|
||||
// 点击Request Fullscreen按钮，图片全屏展示
|
||||
await fullBtn.click()
|
||||
await expect(smallImg).toHaveCSS('display', 'none')
|
||||
await expect(bigImg).not.toHaveCSS('display', 'none')
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe('ref: <Node>')
|
||||
|
||||
// 点击Exit Fullscreen按钮，退出全屏展示
|
||||
// 选取需要添加样式的元素并设置新的CSS属性
|
||||
await page.$eval('.tinyui-design-header', (el) => {
|
||||
el.setAttribute('style', 'display: none;')
|
||||
})
|
||||
|
||||
// // 点击Exit Fullscreen按钮，退出全屏展示
|
||||
await exitFullBtn.click()
|
||||
await expect(smallImg).not.toHaveCSS('display', 'none')
|
||||
await expect(bigImg).toHaveCSS('display', 'none')
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe(null)
|
||||
|
||||
// 全屏时，按Esc键退出全屏
|
||||
await fullBtn.click()
|
||||
await expect(smallImg).toHaveCSS('display', 'none')
|
||||
await expect(bigImg).not.toHaveCSS('display', 'none')
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe('ref: <Node>')
|
||||
await exitFullBtn.press('Escape')
|
||||
await expect(smallImg).not.toHaveCSS('display', 'none')
|
||||
await expect(bigImg).toHaveCSS('display', 'none')
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe(null)
|
||||
// TINY-TODO: 全屏时，按Esc键退出全屏图片有问题
|
||||
|
||||
// pageOnly为true时，为网页全屏
|
||||
await pageOnly.check()
|
||||
await fullBtn.click()
|
||||
await expect(smallImg).toHaveCSS('display', 'none')
|
||||
await expect(bigImg).not.toHaveCSS('display', 'none')
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe(null)
|
||||
|
||||
// pageOnly为false时，为浏览器全屏
|
||||
await exitFullBtn.click()
|
||||
await pageOnly.uncheck()
|
||||
await fullBtn.click()
|
||||
expect(await page.evaluate('document.fullscreenElement')).toBe('ref: <Node>')
|
||||
|
||||
// teleport默认true，目标元素移到body下，反之false时不移动目标元素
|
||||
expect(await page.evaluate('document.fullscreenElement?.nodeName')).toBe('BODY') // 默认true时
|
||||
await exitFullBtn.click()
|
||||
await teleport.uncheck()
|
||||
await fullBtn.click()
|
||||
expect(await page.evaluate('document.fullscreenElement?.nodeName')).toBe('DIV')
|
||||
// TINY-TODO: 因全屏模式下获取不到元素 pageOnly teleport区别暂未测试
|
||||
})
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default {
|
|||
'zh-CN': '自定义组件 wrapper 的样式类名',
|
||||
'en-US': 'Style class name of the custom component wrapper'
|
||||
},
|
||||
'demoId': 'example-component'
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'fullscreen',
|
||||
|
|
@ -81,7 +81,7 @@ export default {
|
|||
'en-US':
|
||||
'When the component is used in component mode, click the component wrapper to determine whether to disable full-screen display. The default value is true.'
|
||||
},
|
||||
'demoId': 'example-component'
|
||||
'demoId': ''
|
||||
}
|
||||
],
|
||||
'events': [
|
||||
|
|
@ -117,7 +117,7 @@ export default {
|
|||
'zh-CN': '函数式使用时，切换全屏模式',
|
||||
'en-US': 'Switch the full-screen mode when the function mode is used.'
|
||||
},
|
||||
'demoId': 'example-component'
|
||||
'demoId': 'example-api'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue