Skip to content

Commit

Permalink
chore(test): update e2e tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@marsidev
marsidev committed Jul 10, 2024
1 parent 77f3686 commit 32b72f3
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 82 deletions.
37 changes: 16 additions & 21 deletions test/e2e/basic.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import {
ensureChallengeSolved,
ensureDirectory,
ensureFrameHidden,
ensureFrameVisible,
sleep,
getFirstWidgetFrame,
ssPath
} from './helpers'

Expand Down Expand Up @@ -41,10 +40,10 @@ test('widget container rendered', async () => {
await expect(page.locator(`#${DEFAULT_CONTAINER_ID}`)).toHaveCount(1)
})

test('widget iframe is visible', async () => {
await sleep(1500)
const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
test.only('widget iframe is visible', async () => {
const iframe = await getFirstWidgetFrame(page)
await expect(iframe.locator('body')).toContainText('Testing only.')

!isCI &&
(await page.screenshot({
path: `${ssPath}/${route}_1-widget-visible.png`
Expand Down Expand Up @@ -87,7 +86,6 @@ test('widget can be removed', async () => {

test('widget can be explicity rendered', async () => {
await page.locator('button', { hasText: 'Render' }).click()
await ensureFrameVisible(page)
await ensureChallengeSolved(page)
!isCI &&
(await page.screenshot({
Expand Down Expand Up @@ -126,41 +124,38 @@ test('can get the token using the promise method', async () => {

test('widget can be sized', async () => {
// check default width
const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
const box = await iframe.locator('body').boundingBox()
const iframe = await getFirstWidgetFrame(page)
const box = await iframe?.locator('body').boundingBox()
expect(box).toBeDefined()
expect(box!.width).toBeCloseTo(300)

// change size
await page.getByTestId('widget-size-value').click()
await page.getByRole('option', { name: 'compact' }).click()

await ensureFrameVisible(page)

// check new width
const iframeAfter = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
const boxAfter = await iframeAfter.locator('body').boundingBox()
const iframeAfter = await getFirstWidgetFrame(page)
const boxAfter = await iframeAfter?.locator('body').boundingBox()
expect(boxAfter).toBeDefined()
expect(boxAfter!.width).toBeCloseTo(130)
})

test('widget can change language', async () => {
await ensureFrameVisible(page)
const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
await expect(iframe.locator('#success-text')).toContainText('Success!')
const iframe = await getFirstWidgetFrame(page)
await expect(iframe?.locator('#success-text')).toContainText('Success!')

await page.getByTestId('widget-lang-value').click()
await page.getByRole('option', { name: 'Español' }).click()
await ensureFrameVisible(page)
await expect(iframe.locator('#success-text')).toContainText('¡Operación exitosa!')
const iframe2 = await getFirstWidgetFrame(page)
await expect(iframe2?.locator('#success-text')).toContainText('¡Operación exitosa!')

await page.getByTestId('widget-lang-value').click()
await page.getByRole('option', { name: 'Deutsch' }).click()
await ensureFrameVisible(page)
await expect(iframe.locator('#success-text')).toContainText('Erfolg!')
const iframe3 = await getFirstWidgetFrame(page)
await expect(iframe3?.locator('#success-text')).toContainText('Erfolg!')

await page.getByTestId('widget-lang-value').click()
await page.getByRole('option', { name: '日本語' }).click()
await ensureFrameVisible(page)
await expect(iframe.locator('#success-text')).toContainText('成功しました!')
const iframe4 = await getFirstWidgetFrame(page)
await expect(iframe4?.locator('#success-text')).toContainText('成功しました!')
})
9 changes: 5 additions & 4 deletions test/e2e/browsers.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { Browser } from '@playwright/test'
import { devices as allDevices, chromium, expect, test, webkit } from '@playwright/test'
import { DEFAULT_CONTAINER_ID, DEFAULT_SCRIPT_ID } from '../../packages/lib/src/utils'
import { ensureDirectory, ensureFrameVisible, ssPath } from './helpers'
import { ensureDirectory, getFirstWidgetFrame, sleep, ssPath } from './helpers'

const { describe } = test
const isCI = process.env.CI
Expand Down Expand Up @@ -54,12 +54,13 @@ describe('Browsers', async () => {

const page = await context.newPage()
await page.goto('/')
await sleep(1000)

await expect(page.locator(`#${DEFAULT_SCRIPT_ID}`)).toHaveCount(1)
await expect(page.locator(`#${DEFAULT_CONTAINER_ID}`)).toHaveCount(1)
await ensureFrameVisible(page)
const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
await expect(iframe.locator('body')).toContainText('Testing only.')
const iframe = await getFirstWidgetFrame(page)
await expect(iframe?.locator('body')).toContainText('Testing only.')

!isCI &&
(await page.screenshot({
path: `${ssPath}/${browserName}-${tokenizedDeviceName}-visible.png`
Expand Down
15 changes: 10 additions & 5 deletions test/e2e/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,6 @@ export const ensureDirectory = (dir: string) => {
if (!fs.existsSync(dir)) fs.mkdirSync(dir)
}

export const ensureFrameVisible = async (page: Page) => {
await expect(page.locator('iframe')).toBeVisible({ timeout: 10000 })
await expect(page.locator('iframe')).toHaveCount(1)
}

export const ensureFrameHidden = async (page: Page) => {
await expect(page.locator('iframe')).toBeHidden()
await expect(page.locator('iframe')).toHaveCount(0)
Expand All @@ -38,3 +33,13 @@ export const ensureChallengeNotSolved = async (page: Page) => {
export async function sleep(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms))
}

export async function getWidgetFrames(page: Page) {
await sleep(1000)
return page.frames().filter(f => f.url().startsWith('https://challenges.cloudflare.com'))
}

export async function getFirstWidgetFrame(page: Page) {
await sleep(1000)
return page.frames().filter(f => f.url().startsWith('https://challenges.cloudflare.com'))[0]
}
43 changes: 20 additions & 23 deletions test/e2e/manual-script-injection-with-custom-script-props.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import {
ensureChallengeSolved,
ensureDirectory,
ensureFrameHidden,
ensureFrameVisible,
sleep,
getFirstWidgetFrame,
ssPath
} from './helpers'

Expand Down Expand Up @@ -41,11 +40,13 @@ test('widget container rendered', async () => {
})

test('widget iframe is visible', async () => {
await sleep(3500)
const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
await expect(iframe.locator('body')).toContainText('Testing only.', {
timeout: 15000
})
// await sleep(3500)
// const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
// await expect(iframe.locator('body')).toContainText('Testing only.', {
// timeout: 15000
// })
const iframe = await getFirstWidgetFrame(page)
await expect(iframe?.locator('body')).toContainText('Testing only.')
!isCI &&
(await page.screenshot({
path: `${ssPath}/${route}_1-widget-visible.png`
Expand All @@ -71,7 +72,6 @@ test('widget can be removed', async () => {

test('widget can be explicity rendered', async () => {
await page.locator('button', { hasText: 'Render' }).click()
await ensureFrameVisible(page)
await ensureChallengeSolved(page)
!isCI &&
(await page.screenshot({
Expand Down Expand Up @@ -110,41 +110,38 @@ test('can get the token using the promise method', async () => {

test('widget can be sized', async () => {
// check default width
const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
const box = await iframe.locator('body').boundingBox()
const iframe = await getFirstWidgetFrame(page)
const box = await iframe?.locator('body').boundingBox()
expect(box).toBeDefined()
expect(box!.width).toBeCloseTo(300)

// change size
await page.getByTestId('widget-size-value').click()
await page.getByRole('option', { name: 'compact' }).click()

await ensureFrameVisible(page)

// check new width
const iframeAfter = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
const boxAfter = await iframeAfter.locator('body').boundingBox()
const iframeAfter = await getFirstWidgetFrame(page)
const boxAfter = await iframeAfter?.locator('body').boundingBox()
expect(boxAfter).toBeDefined()
expect(boxAfter!.width).toBeCloseTo(130)
})

test('widget can change language', async () => {
await ensureFrameVisible(page)
const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
await expect(iframe.locator('#success-text')).toContainText('Success!')
const iframe = await getFirstWidgetFrame(page)
await expect(iframe?.locator('#success-text')).toContainText('Success!')

await page.getByTestId('widget-lang-value').click()
await page.getByRole('option', { name: 'Español' }).click()
await ensureFrameVisible(page)
await expect(iframe.locator('#success-text')).toContainText('¡Operación exitosa!')
const iframe2 = await getFirstWidgetFrame(page)
await expect(iframe2?.locator('#success-text')).toContainText('¡Operación exitosa!')

await page.getByTestId('widget-lang-value').click()
await page.getByRole('option', { name: 'Deutsch' }).click()
await ensureFrameVisible(page)
await expect(iframe.locator('#success-text')).toContainText('Erfolg!')
const iframe3 = await getFirstWidgetFrame(page)
await expect(iframe3?.locator('#success-text')).toContainText('Erfolg!')

await page.getByTestId('widget-lang-value').click()
await page.getByRole('option', { name: '日本語' }).click()
await ensureFrameVisible(page)
await expect(iframe.locator('#success-text')).toContainText('成功しました!')
const iframe4 = await getFirstWidgetFrame(page)
await expect(iframe4?.locator('#success-text')).toContainText('成功しました!')
})
37 changes: 16 additions & 21 deletions test/e2e/manual-script-injection.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import {
ensureChallengeSolved,
ensureDirectory,
ensureFrameHidden,
ensureFrameVisible,
sleep,
getFirstWidgetFrame,
ssPath
} from './helpers'

Expand Down Expand Up @@ -41,9 +40,9 @@ test('widget container rendered', async () => {
})

test('widget iframe is visible', async () => {
await sleep(3500)
const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
await expect(iframe.locator('body')).toContainText('Testing only.')
const iframe = await getFirstWidgetFrame(page)
await expect(iframe?.locator('body')).toContainText('Testing only.')

!isCI &&
(await page.screenshot({
path: `${ssPath}/${route}_1-widget-visible.png`
Expand All @@ -69,7 +68,6 @@ test('widget can be removed', async () => {

test('widget can be explicity rendered', async () => {
await page.locator('button', { hasText: 'Render' }).click()
await ensureFrameVisible(page)
await ensureChallengeSolved(page)
!isCI &&
(await page.screenshot({
Expand Down Expand Up @@ -108,41 +106,38 @@ test('can get the token using the promise method', async () => {

test('widget can be sized', async () => {
// check default width
const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
const box = await iframe.locator('body').boundingBox()
const iframe = await getFirstWidgetFrame(page)
const box = await iframe?.locator('body').boundingBox()
expect(box).toBeDefined()
expect(box!.width).toBeCloseTo(300)

// change size
await page.getByTestId('widget-size-value').click()
await page.getByRole('option', { name: 'compact' }).click()

await ensureFrameVisible(page)

// check new width
const iframeAfter = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
const boxAfter = await iframeAfter.locator('body').boundingBox()
const iframeAfter = await getFirstWidgetFrame(page)
const boxAfter = await iframeAfter?.locator('body').boundingBox()
expect(boxAfter).toBeDefined()
expect(boxAfter!.width).toBeCloseTo(130)
})

test('widget can change language', async () => {
await ensureFrameVisible(page)
const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]')
await expect(iframe.locator('#success-text')).toContainText('Success!')
const iframe = await getFirstWidgetFrame(page)
await expect(iframe?.locator('#success-text')).toContainText('Success!')

await page.getByTestId('widget-lang-value').click()
await page.getByRole('option', { name: 'Español' }).click()
await ensureFrameVisible(page)
await expect(iframe.locator('#success-text')).toContainText('¡Operación exitosa!')
const iframe2 = await getFirstWidgetFrame(page)
await expect(iframe2?.locator('#success-text')).toContainText('¡Operación exitosa!')

await page.getByTestId('widget-lang-value').click()
await page.getByRole('option', { name: 'Deutsch' }).click()
await ensureFrameVisible(page)
await expect(iframe.locator('#success-text')).toContainText('Erfolg!')
const iframe3 = await getFirstWidgetFrame(page)
await expect(iframe3?.locator('#success-text')).toContainText('Erfolg!')

await page.getByTestId('widget-lang-value').click()
await page.getByRole('option', { name: '日本語' }).click()
await ensureFrameVisible(page)
await expect(iframe.locator('#success-text')).toContainText('成功しました!')
const iframe4 = await getFirstWidgetFrame(page)
await expect(iframe4?.locator('#success-text')).toContainText('成功しました!')
})
19 changes: 11 additions & 8 deletions test/e2e/multiple-widgets.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { Browser, Page } from '@playwright/test'
import { chromium, expect, test } from '@playwright/test'
import { DEFAULT_CONTAINER_ID, DEFAULT_SCRIPT_ID } from '../../packages/lib/src/utils'
import { deleteScreenshots, demoToken, ensureDirectory, sleep, ssPath } from './helpers'
import { deleteScreenshots, demoToken, ensureDirectory, getWidgetFrames, ssPath } from './helpers'

const isCI = process.env.CI

Expand Down Expand Up @@ -32,12 +32,13 @@ test('widget containers rendered', async () => {
await expect(page.locator('#widget-2')).toHaveCount(1)
})

test('widgets iframe are visible', async () => {
await sleep(1500)
await expect(page.locator('iframe')).toHaveCount(2, { timeout: 10000 })
test('widget iframes are visible', async () => {
const frames = await getWidgetFrames(page)
expect(frames).toHaveLength(2)

const iframe = page.frameLocator('iframe[src^="https://challenges.cloudflare.com"]').first()
await expect(iframe.locator('body')).toContainText('Testing only.')
for (const frame of frames) {
await expect(frame.locator('body')).toContainText('Testing only.')
}
!isCI &&
(await page.screenshot({
path: `${ssPath}/${route}_1-widget-visible.png`
Expand Down Expand Up @@ -69,12 +70,12 @@ test('widget can be explicity rendered', async () => {
await page.locator('button', { hasText: 'Render' }).first().click()
await page.locator('button', { hasText: 'Render' }).last().click()

await expect(page.locator('iframe')).toHaveCount(2, { timeout: 10000 })
await expect(page.locator('[name="cf-turnstile-response"]')).toHaveCount(2)
await expect(page.locator('[name="cf-turnstile-response"]').first()).toHaveValue(demoToken)
await expect(page.locator('[name="cf-turnstile-response"]').last()).toHaveValue(demoToken)

!isCI &&
!isCI &&
(await page.screenshot({
path: `${ssPath}/${route}_4-widget-rendered.png`
}))
Expand All @@ -87,7 +88,9 @@ test('widget can be reset', async () => {
await page.locator('button', { hasText: 'Reset' }).last().click()
await expect(page.locator('[name="cf-turnstile-response"]').last()).toHaveValue('')

await expect(page.locator('iframe')).toHaveCount(2, { timeout: 10000 })
const frames = await getWidgetFrames(page)
expect(frames).toHaveLength(2)

await expect(page.locator('[name="cf-turnstile-response"]')).toHaveCount(2)
await expect(page.locator('[name="cf-turnstile-response"]').first()).toHaveValue(demoToken)
await expect(page.locator('[name="cf-turnstile-response"]').last()).toHaveValue(demoToken)
Expand Down

0 comments on commit 32b72f3

Please sign in to comment.