diff --git a/e2e/consts.ts b/e2e/consts.ts new file mode 100644 index 00000000..d77f40c9 --- /dev/null +++ b/e2e/consts.ts @@ -0,0 +1 @@ +export const IFRAME_SELECTOR = 'iframe[title="storybook-preview-iframe"]'; diff --git a/e2e/events.spec.ts b/e2e/events.spec.ts index 6ff4c05a..69fbfa1b 100644 --- a/e2e/events.spec.ts +++ b/e2e/events.spec.ts @@ -1,6 +1,6 @@ import { test, expect } from '@playwright/test'; -const IFRAME_LOCATOR = 'iframe[title="storybook-preview-iframe"]'; +import { IFRAME_SELECTOR } from './consts'; test.beforeEach(async ({ page }) => { await page.goto('/'); @@ -8,7 +8,7 @@ test.beforeEach(async ({ page }) => { }); test("should trigger 'onMove' event with 'mousemove' event type when mouse hovers tilt element", async ({ page }) => { - const content = page.frameLocator(IFRAME_LOCATOR); + const content = page.frameLocator(IFRAME_SELECTOR); await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } }); await expect(content.getByTestId('evenDescription')).toHaveText( @@ -17,7 +17,7 @@ test("should trigger 'onMove' event with 'mousemove' event type when mouse hover }); test("should trigger 'onMove' event with 'autoreset' event type when mouse leaves tilt element", async ({ page }) => { - const content = page.frameLocator(IFRAME_LOCATOR); + const content = page.frameLocator(IFRAME_SELECTOR); await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } }); await content.getByText('Track events:').hover(); @@ -27,7 +27,7 @@ test("should trigger 'onMove' event with 'autoreset' event type when mouse leave }); test("should trigger 'onEnter' event with 'mouseenter' event type when mouse enters tilt element", async ({ page }) => { - const content = page.frameLocator(IFRAME_LOCATOR); + const content = page.frameLocator(IFRAME_SELECTOR); await content.getByLabel('onMove').uncheck(); await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } }); @@ -37,7 +37,7 @@ test("should trigger 'onEnter' event with 'mouseenter' event type when mouse ent }); test("should trigger 'onLeave' event with 'mouseleave' event type when mouse enters tilt element", async ({ page }) => { - const content = page.frameLocator(IFRAME_LOCATOR); + const content = page.frameLocator(IFRAME_SELECTOR); await content.getByLabel('onMove').uncheck(); await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } }); diff --git a/e2e/global.setup.ts b/e2e/global.setup.ts new file mode 100644 index 00000000..316d19ac --- /dev/null +++ b/e2e/global.setup.ts @@ -0,0 +1,13 @@ +// import { test as setup } from '@playwright/test'; + +// setup('do login', async ({ page }) => { +// await page.goto('/'); +// await page.getByLabel('User Name').fill('user'); +// await page.getByLabel('Password').fill('password'); +// await page.getByText('Sign in').click(); + +// // Wait until the page actually signs in. +// await expect(page.getByText('Hello, user!')).toBeVisible(); + +// await page.context().storageState({ path: STORAGE_STATE }); +// }); diff --git a/e2e/on-move-params.spec.ts b/e2e/on-move-params.spec.ts index 663573bf..38ceb5bd 100644 --- a/e2e/on-move-params.spec.ts +++ b/e2e/on-move-params.spec.ts @@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'; import { OnMoveParams } from 'index'; -const IFRAME_LOCATOR = 'iframe[title="storybook-preview-iframe"]'; +import { IFRAME_SELECTOR } from './consts'; test.beforeEach(async ({ page }) => { await page.goto('/'); @@ -12,7 +12,7 @@ test.beforeEach(async ({ page }) => { test('should get max values of move params rendered when mouse is positioned at top left corner of tilt element', async ({ page, }) => { - const content = page.frameLocator(IFRAME_LOCATOR); + const content = page.frameLocator(IFRAME_SELECTOR); await content.getByTestId('topLeft').hover({ position: { x: 10, y: 10 } }); await expect(content.getByTestId('tiltAngleX')).toHaveText('-20.00° / -100.00%'); @@ -22,7 +22,7 @@ test('should get max values of move params rendered when mouse is positioned at }); test('should get max values of move params when mouse is positioned at corners of tilt element', async ({ page }) => { - const content = page.frameLocator(IFRAME_LOCATOR); + const content = page.frameLocator(IFRAME_SELECTOR); await content.getByTestId('topLeft').hover({ position: { x: 10, y: 10 } }); @@ -74,7 +74,7 @@ test('should get max values of move params when mouse is positioned at corners o }); test('should get half of max value when mouse is positioned in the middle of tilt element', async ({ page }) => { - const content = page.frameLocator(IFRAME_LOCATOR); + const content = page.frameLocator(IFRAME_SELECTOR); await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } }); diff --git a/playwright.config.ts b/playwright.config.ts index 725ecb6d..8eb2cb88 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -20,39 +20,50 @@ export default defineConfig({ }, projects: [ + { + name: 'setup', + testMatch: /global.setup\.ts/, + }, { name: 'chromium', use: { ...devices['Desktop Chrome'] }, + dependencies: ['setup'], }, { name: 'firefox', use: { ...devices['Desktop Firefox'] }, + dependencies: ['setup'], }, { name: 'webkit', use: { ...devices['Desktop Safari'] }, + dependencies: ['setup'], }, /* Test against mobile viewports. */ // { // name: 'Mobile Chrome', // use: { ...devices['Pixel 5'] }, + // dependencies: ['setup'], // }, // { // name: 'Mobile Safari', // use: { ...devices['iPhone 12'] }, + // dependencies: ['setup'], // }, /* Test against branded browsers. */ // { // name: 'Microsoft Edge', // use: { ...devices['Desktop Edge'], channel: 'msedge' }, + // dependencies: ['setup'], // }, // { // name: 'Google Chrome', // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + // dependencies: ['setup'], // }, ],