Add playwright tests (#1484)
This PR replaces our webdriver end to end tests with playwright tests. It: - replaces our webdriver workflow with a new e2e workflow based on playwright - removes the webdriver project - adds e2e tests to our examples app - replaces all `data-wd` attributes with `data-testid` ### Coverage Most of the tests from our previous e2e tests are reproduced here, though there are some related to our gestures that will need to be done in a different way—or not at all. I've also added a handful of new tests, too. ### Where are they The tests are now part of our examples app rather than being in its own different app. This should help us test our different examples too. As far as I can tell there are no downsides here in terms of the regular developer experience, though they might complicate any CodeSandbox projects that are hooked into the examples app. ### Change Type - [x] `tests` — Changes to any testing-related code only (will not publish a new version)
This commit is contained in:
Steve Ruiz
GitHub
parent
e3dec58499
commit
e3cf05f408
99 changed files with 1759 additions and 9253 deletions
169
apps/examples/e2e/tests/test-shapes.spec.ts
Normal file
169
apps/examples/e2e/tests/test-shapes.spec.ts
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
import test, { Page, expect } from '@playwright/test'
|
||||
import { getAllShapeTypes, setupPage } from '../shared-e2e'
|
||||
|
||||
export function sleep(ms: number) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms))
|
||||
}
|
||||
|
||||
const clickableShapeCreators = [
|
||||
{ tool: 'draw', shape: 'draw' },
|
||||
{ tool: 'frame', shape: 'frame' },
|
||||
{ tool: 'note', shape: 'note' },
|
||||
{ tool: 'text', shape: 'text' },
|
||||
{ tool: 'rectangle', shape: 'geo' },
|
||||
{ tool: 'ellipse', shape: 'geo' },
|
||||
{ tool: 'triangle', shape: 'geo' },
|
||||
{ tool: 'diamond', shape: 'geo' },
|
||||
{ tool: 'pentagon', shape: 'geo' },
|
||||
{ tool: 'hexagon', shape: 'geo' },
|
||||
{ tool: 'octagon', shape: 'geo' },
|
||||
{ tool: 'star', shape: 'geo' },
|
||||
{ tool: 'rhombus', shape: 'geo' },
|
||||
{ tool: 'oval', shape: 'geo' },
|
||||
{ tool: 'trapezoid', shape: 'geo' },
|
||||
{ tool: 'arrow-right', shape: 'geo' },
|
||||
{ tool: 'arrow-left', shape: 'geo' },
|
||||
{ tool: 'arrow-up', shape: 'geo' },
|
||||
{ tool: 'arrow-down', shape: 'geo' },
|
||||
{ tool: 'x-box', shape: 'geo' },
|
||||
{ tool: 'check-box', shape: 'geo' },
|
||||
]
|
||||
|
||||
const draggableShapeCreators = [
|
||||
{ tool: 'draw', shape: 'draw' },
|
||||
{ tool: 'arrow', shape: 'arrow' },
|
||||
{ tool: 'frame', shape: 'frame' },
|
||||
{ tool: 'note', shape: 'note' },
|
||||
{ tool: 'text', shape: 'text' },
|
||||
{ tool: 'line', shape: 'line' },
|
||||
{ tool: 'rectangle', shape: 'geo' },
|
||||
{ tool: 'ellipse', shape: 'geo' },
|
||||
{ tool: 'triangle', shape: 'geo' },
|
||||
{ tool: 'diamond', shape: 'geo' },
|
||||
{ tool: 'pentagon', shape: 'geo' },
|
||||
{ tool: 'hexagon', shape: 'geo' },
|
||||
{ tool: 'octagon', shape: 'geo' },
|
||||
{ tool: 'star', shape: 'geo' },
|
||||
{ tool: 'rhombus', shape: 'geo' },
|
||||
{ tool: 'oval', shape: 'geo' },
|
||||
{ tool: 'trapezoid', shape: 'geo' },
|
||||
{ tool: 'arrow-right', shape: 'geo' },
|
||||
{ tool: 'arrow-left', shape: 'geo' },
|
||||
{ tool: 'arrow-up', shape: 'geo' },
|
||||
{ tool: 'arrow-down', shape: 'geo' },
|
||||
{ tool: 'x-box', shape: 'geo' },
|
||||
{ tool: 'check-box', shape: 'geo' },
|
||||
]
|
||||
|
||||
const otherTools = [{ tool: 'select' }, { tool: 'eraser' }, { tool: 'laser' }]
|
||||
|
||||
let page: Page
|
||||
|
||||
test.describe('Shape Tools', () => {
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage()
|
||||
await setupPage(page)
|
||||
})
|
||||
|
||||
test('creates shapes with other tools', async () => {
|
||||
await page.keyboard.press('Control+a')
|
||||
await page.keyboard.press('Backspace')
|
||||
expect(await getAllShapeTypes(page)).toEqual([])
|
||||
|
||||
for (const { tool } of otherTools) {
|
||||
// Find and click the button
|
||||
if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
|
||||
if (!(await page.getByTestId(`tools.more`).isVisible())) {
|
||||
throw Error(`Tool more is not visible`)
|
||||
}
|
||||
|
||||
await page.getByTestId('tools.more').click()
|
||||
}
|
||||
|
||||
if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
|
||||
throw Error(`Tool ${tool} is not visible`)
|
||||
}
|
||||
|
||||
await page.getByTestId(`tools.${tool}`).click()
|
||||
|
||||
// Button should be selected
|
||||
expect(
|
||||
await page
|
||||
.getByTestId(`tools.${tool}`)
|
||||
.elementHandle()
|
||||
.then((d) => d?.getAttribute('data-state'))
|
||||
).toBe('selected')
|
||||
}
|
||||
})
|
||||
|
||||
test('creates shapes clickable tools', async () => {
|
||||
await page.keyboard.press('Control+a')
|
||||
await page.keyboard.press('Backspace')
|
||||
expect(await getAllShapeTypes(page)).toEqual([])
|
||||
|
||||
for (const { tool, shape } of clickableShapeCreators) {
|
||||
// Find and click the button
|
||||
if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
|
||||
await page.getByTestId('tools.more').click()
|
||||
}
|
||||
await page.getByTestId(`tools.${tool}`).click()
|
||||
|
||||
// Button should be selected
|
||||
expect(
|
||||
await page
|
||||
.getByTestId(`tools.${tool}`)
|
||||
.elementHandle()
|
||||
.then((d) => d?.getAttribute('data-state'))
|
||||
).toBe('selected')
|
||||
|
||||
// Click on the page
|
||||
await page.mouse.click(200, 200)
|
||||
|
||||
// We should have a corresponding shape in the page
|
||||
expect(await getAllShapeTypes(page)).toEqual([shape])
|
||||
|
||||
// Reset for next time
|
||||
await page.mouse.click(0, 0) // to ensure we're not focused
|
||||
await page.keyboard.press('Control+a')
|
||||
await page.keyboard.press('Backspace')
|
||||
}
|
||||
|
||||
expect(await getAllShapeTypes(page)).toEqual([])
|
||||
})
|
||||
|
||||
test('creates shapes with draggable tools', async () => {
|
||||
await page.keyboard.press('Control+a')
|
||||
await page.keyboard.press('Backspace')
|
||||
expect(await getAllShapeTypes(page)).toEqual([])
|
||||
|
||||
for (const { tool, shape } of draggableShapeCreators) {
|
||||
// Find and click the button
|
||||
if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
|
||||
await page.getByTestId('tools.more').click()
|
||||
}
|
||||
await page.getByTestId(`tools.${tool}`).click()
|
||||
|
||||
// Button should be selected
|
||||
expect(
|
||||
await page
|
||||
.getByTestId(`tools.${tool}`)
|
||||
.elementHandle()
|
||||
.then((d) => d?.getAttribute('data-state'))
|
||||
).toBe('selected')
|
||||
|
||||
// Click and drag
|
||||
await page.mouse.move(200, 200)
|
||||
await page.mouse.down()
|
||||
await page.mouse.move(250, 250)
|
||||
await page.mouse.up()
|
||||
|
||||
// We should have a corresponding shape in the page
|
||||
expect(await getAllShapeTypes(page)).toEqual([shape])
|
||||
|
||||
// Reset for next time
|
||||
await page.mouse.click(0, 0) // to ensure we're not focused
|
||||
await page.keyboard.press('Control+a')
|
||||
await page.keyboard.press('Backspace')
|
||||
}
|
||||
})
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue