diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index aaa1e59..36b98a9 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -3,10 +3,10 @@ name: Playwright Tests on: push: branches: [main, master] - pull_request: - branches: [main, master] + # pull_request: + # branches: [main, master] schedule: - - cron: '0 0 * * *' # 6 AM GMT+6 (0 0 in UTC) + - cron: '0 2 * * *' # 8 AM GMT+6 permissions: contents: write # Grants write access to the repository diff --git a/playwright.config.js b/playwright.config.js index 0d16781..d1aeb7d 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -1,27 +1,34 @@ const { defineConfig, devices } = require('@playwright/test'); require('dotenv').config(); +const isCI = !!process.env.CI; // Check if the CI environment variable is set + module.exports = defineConfig({ testDir: './tests', fullyParallel: true, - forbidOnly: !!process.env.CI, - retries: process.env.CI ? 2 : 0, - workers: process.env.CI ? 1 : undefined, + forbidOnly: isCI, + retries: isCI ? 3 : 1, + workers: isCI ? 4 : 4, reporter: [ - [ - './node_modules/playwright-slack-report/dist/src/SlackReporter.js', - { - slackWebHookUrl: process.env.SLACK_WEBHOOK_URL, - sendResults: 'always', - maxNumberOfFailuresToShow: 0, - meta: [ + ...(isCI + ? [ + [ + './node_modules/playwright-slack-report/dist/src/SlackReporter.js', { - key: ":embedpress: EmbedPress Automation - Test Results", - value: "", - } - ] - }, - ], + slackWebHookUrl: process.env.SLACK_WEBHOOK_URL, + sendResults: 'always', + maxNumberOfFailuresToShow: 0, + meta: [ + { + key: ":embedpress: EmbedPress Automation - Test Results", + value: + "", + }, + ], + }, + ], + ] + : []), ['html', { outputFolder: 'playwright-report', open: 'never' }], // Ensure you have the HTML reporter as well ['dot'], // Console output reporter ], @@ -35,6 +42,6 @@ module.exports = defineConfig({ { name: 'chromium', use: { ...devices['Desktop Chrome'] }, - } + }, ], }); diff --git a/tests/classic/youtube.spec.js b/tests/classic/youtube.spec.js index 4a9d9d1..4ee307a 100644 --- a/tests/classic/youtube.spec.js +++ b/tests/classic/youtube.spec.js @@ -6,6 +6,7 @@ let slug = 'playwright-classic-editor/classic-youtube/'; test.describe("Elementor YouTube", () => { test.beforeEach(async ({ page }) => { await page.goto(slug); + await page.waitForLoadState('networkidle'); }); test('Default YouTube', async ({ page }) => { diff --git a/tests/elementor/OpenSeaNFT.spec.js b/tests/elementor/OpenSeaNFT.spec.js new file mode 100644 index 0000000..e69de29 diff --git a/tests/elementor/calendly.spec.js b/tests/elementor/calendly.spec.js new file mode 100644 index 0000000..14cdb45 --- /dev/null +++ b/tests/elementor/calendly.spec.js @@ -0,0 +1,28 @@ +const { test, expect } = require('@playwright/test'); + +let slug = 'playwright-gutenberg/elementor-calendly'; + + +test.describe("Gutenberg Calendly", () => { + test.beforeEach(async ({ page }) => { + await page.goto(slug); + }); + + test('Default Gutenberg Calendly', async ({ page }) => { + + let defaultLocator = page.locator('iframe[title="Select a Date \\& Time - Calendly"]') + + await expect(page.locator('h2')).toBeVisible(); + + await expect(defaultLocator.contentFrame().getByLabel('Cookie banner')).toBeVisible(); + await expect(defaultLocator.contentFrame().getByText('Md. Nahid Hasan')).toBeVisible(); + await expect(defaultLocator.contentFrame().getByRole('heading', { name: 'Custom Event' })).toBeVisible(); + await expect(defaultLocator.contentFrame().getByText('Web conferencing details')).toBeVisible(); + await expect(defaultLocator.contentFrame().getByText('Md. Nahid HasanCustom Event1')).toBeVisible(); + await expect(defaultLocator.contentFrame().getByRole('link', { name: 'powered by Calendly' })).toBeVisible(); + await expect(defaultLocator.contentFrame().locator('div').filter({ hasText: /^Cookie settings$/ }).nth(1)).toBeVisible(); + }); + + // More TestCases will added later as found error on this feature card link - https://projects.startise.com/fbs-73072 + +}); \ No newline at end of file diff --git a/tests/elementor/flip_book_pdf.spec.js b/tests/elementor/flip_book_pdf.spec.js index b6825d4..550673f 100644 --- a/tests/elementor/flip_book_pdf.spec.js +++ b/tests/elementor/flip_book_pdf.spec.js @@ -6,6 +6,7 @@ let slug = 'flip-book-pdf-elementor'; test.describe("Elementor Flip Book PDF", () => { test.beforeEach(async ({ page }) => { await page.goto(slug); + await page.waitForLoadState('networkidle'); }); test('To Enable All Controls', async ({ page }) => { diff --git a/tests/elementor/google-photos.spec.js b/tests/elementor/google-photos.spec.js new file mode 100644 index 0000000..09d4f9e --- /dev/null +++ b/tests/elementor/google-photos.spec.js @@ -0,0 +1,45 @@ +const { test, expect } = require('@playwright/test'); + +let slug = 'playwright-elementor/elementor-google-photos'; + + +test.describe("Google Photos", () => { + test.beforeEach(async ({ page }) => { + await page.goto(slug); + await page.waitForLoadState('networkidle'); + }); + + test('Google Photos Carousel', async ({ page }) => { + await expect(page.getByRole('heading', { name: 'Google Photos Carousel' })).toBeVisible(); + await expect(page.locator('#ep-elements-id-f3716c7 iframe').contentFrame().getByTitle('Open in new window.').getByRole('img')).toBeVisible(); + }); + + test('Pro - Google Photos Gallery Player', async ({ page }) => { + await page.getByRole('heading', { name: 'Pro - Google Photos Gallery Player', exact: true }).click(); + await expect(page.locator('#ep-elements-id-dba371e iframe').contentFrame().locator('.jx-imageset').first()).toBeVisible(); + await expect(page.locator('#ep-elements-id-dba371e iframe').contentFrame().locator('div:nth-child(3) > div > div:nth-child(2) > svg')).toBeVisible(); + await expect(page.locator('#ep-elements-id-dba371e iframe').contentFrame().locator('div:nth-child(5) > div:nth-child(2) > div > div:nth-child(2) > svg')).toBeVisible(); + await page.locator('#ep-elements-id-dba371e iframe').contentFrame().locator('div:nth-child(7) > .jx-svg-image > svg').click(); + await page.locator('#ep-elements-id-dba371e iframe').contentFrame().locator('.jx-carousel-arrow > .jx-svg-image > svg').first().click(); + await page.locator('#ep-elements-id-dba371e iframe').contentFrame().locator('div:nth-child(2) > svg').first().click(); + }); + + test('Pro - Google Photos Gallery Player - Auto Play & Repeat On', async ({ page }) => { + await expect(page.getByRole('heading', { name: 'Pro - Google Photos Gallery Player - Auto Play & Repeat On' })).toBeVisible(); + await expect(page.locator('#ep-elements-id-117fe6c iframe').contentFrame().locator('.jx-imageset').first()).toBeVisible(); + await expect(page.locator('#ep-elements-id-117fe6c iframe').contentFrame().locator('div:nth-child(8) > .jx-svg-image > svg')).toBeVisible(); + await expect(page.locator('#ep-elements-id-117fe6c iframe').contentFrame().locator('img:nth-child(2)').first()).toBeVisible(); + await expect(page.locator('#ep-elements-id-117fe6c iframe').contentFrame().locator('div:nth-child(2) > .jx-imageset > div > img:nth-child(2)')).toBeVisible(); + await expect(page.locator('#ep-elements-id-117fe6c iframe').contentFrame().locator('div:nth-child(3) > .jx-imageset > div > img:nth-child(2)')).toBeVisible(); + await expect(page.locator('#ep-elements-id-117fe6c iframe').contentFrame().locator('div:nth-child(4) > .jx-imageset > div > img:nth-child(2)')).toBeVisible(); + await expect(page.locator('#ep-elements-id-117fe6c iframe').contentFrame().locator('img:nth-child(2)').first()).toBeVisible(); + }); + + test('Single Photo - With Color', async ({ page }) => { + await expect(page.getByRole('heading', { + name: 'Single Photo - With Color' + })).toBeVisible(); + await expect(page.locator('#ep-elements-id-f0593d4 iframe').contentFrame().locator('.jx-imageset')).toBeVisible(); + await expect(page.locator('#ep-elements-id-f0593d4 iframe').contentFrame().getByRole('link', { name: 'New item by Md. Nahid Hasan' })).toBeVisible(); + }); +}); \ No newline at end of file diff --git a/tests/elementor/modern_pdf.spec.js b/tests/elementor/modern_pdf.spec.js index d4ab0ec..17ea384 100644 --- a/tests/elementor/modern_pdf.spec.js +++ b/tests/elementor/modern_pdf.spec.js @@ -6,6 +6,7 @@ let slug = 'modern-pdf-elementor'; test.describe("Elementor Modern PDF", () => { test.beforeEach(async ({ page }) => { await page.goto(slug); + await page.waitForLoadState('networkidle'); }); test('To Enable All Controls', async ({ page }) => { diff --git a/tests/elementor/spotify.spec.js b/tests/elementor/spotify.spec.js index bfd314a..088644a 100644 --- a/tests/elementor/spotify.spec.js +++ b/tests/elementor/spotify.spec.js @@ -6,6 +6,7 @@ let slug = 'playwright-elementor/elementor-spotify'; test.describe('Elementor Spotify', () => { test.beforeEach(async ({ page }) => { await page.goto(slug); + await page.waitForLoadState('networkidle'); }); test('Spotify Single', async ({ page }) => { @@ -72,7 +73,5 @@ test.describe('Elementor Spotify', () => { await expect(iframe.getByTestId('tracklist-row-0')).toBeVisible(); await expect(iframe.getByTestId('tracklist-row-1')).toBeVisible(); await iframe.getByTestId('play-pause-button').click(); - await page.waitForTimeout(3000); - await iframe.getByTestId('play-pause-button').click(); }); }); \ No newline at end of file diff --git a/tests/elementor/spreaker.spec.js b/tests/elementor/spreaker.spec.js index 39af0c9..9fe7e3f 100644 --- a/tests/elementor/spreaker.spec.js +++ b/tests/elementor/spreaker.spec.js @@ -6,10 +6,12 @@ let slug = 'elementor-spreaker'; test.describe("Elementor Spreaker", () => { test.beforeEach(async ({ page }) => { await page.goto(slug); + await page.waitForLoadState('networkidle'); await expect(page.getByRole('heading', { name: 'Elementor Spreaker' })).toBeVisible(); }); + // Spreaker Playlist - test('Spreaker Playlist', async ({ page }) => { + test('Spreaker Playlist - Elementor', async ({ page }) => { // Assert the main heading is visible const heading = page.getByRole('heading', { name: 'Spreaker Playlist' }); await expect(heading).toBeVisible(); @@ -23,11 +25,10 @@ test.describe("Elementor Spreaker", () => { // Define locators for elements within the iframe const elementsToCheck = [ - // { locator: frame.getByRole('link', { name: 'The Deadliest Mountain on' }), description: 'Episode link' }, { locator: frame.getByLabel('Listen on Spreaker'), description: 'Listen on Spreaker button' }, { locator: frame.getByRole('link', { name: 'Privacy Policy' }), description: 'Privacy Policy link' }, { locator: frame.getByRole('img', { name: 'The Deadliest Mountain on' }).first(), description: 'Episode image' }, - { locator: frame.getByLabel('Play episode The Deadliest').first(), description: 'Play button' }, + { locator: frame.locator('li').filter({ hasText: 'The Deadliest Mountain on' }).getByLabel('Play episode The Deadliest Mountain on Earth'), description: 'Specific Play button' }, { locator: frame.getByLabel('Skip back 10 seconds'), description: 'Skip back button' }, { locator: frame.getByLabel('Skip forward 30 seconds'), description: 'Skip forward button' }, { locator: frame.getByLabel('Like episode'), description: 'Like button' }, @@ -36,10 +37,6 @@ test.describe("Elementor Spreaker", () => { { locator: frame.getByLabel('player.download_episode'), description: 'Download button' }, { locator: frame.locator('.button_info').first(), description: 'Info button' }, { locator: frame.getByText('The Deadliest Mountain on Earthepisode_explicit16:'), description: 'Episode text' }, - { locator: frame.getByRole('list').getByLabel('Play episode The Deadliest'), description: 'Play episode list item' }, - { locator: frame.getByRole('list').getByRole('img', { name: 'The Deadliest Mountain on' }), description: 'Episode list image' }, - { locator: frame.locator('li').filter({ hasText: 'The Deadliest Mountain on' }).locator('span'), description: 'Episode span' }, - { locator: frame.locator('li').filter({ hasText: 'The Deadliest Mountain on' }).getByLabel('Read description'), description: 'Read description button' }, ]; // Check visibility of all elements in the iframe @@ -47,22 +44,29 @@ test.describe("Elementor Spreaker", () => { await expect(locator).toBeVisible({ message: `${description} should be visible` }); } - // Interact with play and pause buttons - const playButton = frame.getByLabel('Play episode The Deadliest').first(); - const pauseButton = frame.getByLabel('Pause episode The Deadliest').first(); + // Interact with specific play and pause buttons + const specificPlayButton = frame + .locator('li') + .filter({ hasText: 'The Deadliest Mountain on Earth' }) + .getByLabel('Play episode The Deadliest Mountain on Earth'); + + const specificPauseButton = frame + .locator('li') + .filter({ hasText: 'The Deadliest Mountain on Earth' }) + .getByLabel('Pause episode The Deadliest Mountain on Earth'); - await playButton.click(); + await specificPlayButton.click(); await page.waitForTimeout(500); // Small delay to simulate playback - await pauseButton.click(); + await specificPauseButton.click(); // Assert CSS property of an element within the frame const cssElement = frame.locator('.widget.theme_light.theme_with_playlist'); // Assert that the element has the expected class await expect(cssElement).toHaveClass(/widget theme_light theme_with_playlist/); - }); + // Enable Pro Features test('Enable Pro Features', async ({ page }) => { // Check the main heading visibility diff --git a/tests/elementor/youtube.spec.js b/tests/elementor/youtube.spec.js index d2b5430..f8ef206 100644 --- a/tests/elementor/youtube.spec.js +++ b/tests/elementor/youtube.spec.js @@ -6,6 +6,7 @@ let slug = 'elementor-youtube-2'; test.describe("Elementor YouTube", () => { test.beforeEach(async ({ page }) => { await page.goto(slug); + await page.waitForLoadState('networkidle'); }); test('YouTube Chanel Gallery', async ({ page }) => { diff --git a/tests/gutenberg/calendly.spec.js b/tests/gutenberg/calendly.spec.js new file mode 100644 index 0000000..cf60650 --- /dev/null +++ b/tests/gutenberg/calendly.spec.js @@ -0,0 +1,28 @@ +const { test, expect } = require('@playwright/test'); + +let slug = 'playwright-gutenberg/gutenberg-calendly'; + + +test.describe("Gutenberg Calendly", () => { + test.beforeEach(async ({ page }) => { + await page.goto(slug); + }); + + test('Default Gutenberg Calendly', async ({ page }) => { + + let defaultLocator = page.locator('iframe[title="Select a Date \\& Time - Calendly"]') + + await expect(page.locator('h2')).toBeVisible(); + + await expect(defaultLocator.contentFrame().getByLabel('Cookie banner')).toBeVisible(); + await expect(defaultLocator.contentFrame().getByText('Md. Nahid Hasan')).toBeVisible(); + await expect(defaultLocator.contentFrame().getByRole('heading', { name: 'Custom Event' })).toBeVisible(); + await expect(defaultLocator.contentFrame().getByText('Web conferencing details')).toBeVisible(); + await expect(defaultLocator.contentFrame().getByText('Md. Nahid HasanCustom Event1')).toBeVisible(); + await expect(defaultLocator.contentFrame().getByRole('link', { name: 'powered by Calendly' })).toBeVisible(); + await expect(defaultLocator.contentFrame().locator('div').filter({ hasText: /^Cookie settings$/ }).nth(1)).toBeVisible(); + }); + + // More TestCases will added later as found error on this feature card link - https://projects.startise.com/fbs-73072 + +}); \ No newline at end of file diff --git a/tests/gutenberg/flip_book_pdf.spec.js b/tests/gutenberg/flip_book_pdf.spec.js index fb1d288..3f7c0c6 100644 --- a/tests/gutenberg/flip_book_pdf.spec.js +++ b/tests/gutenberg/flip_book_pdf.spec.js @@ -6,6 +6,7 @@ let slug = 'flip-book-pdf'; test.describe("Gutenberg Flip Book PDF", () => { test.beforeEach(async ({ page }) => { await page.goto(slug); + await page.waitForLoadState('networkidle'); await expect(page.getByRole('heading', { name: 'Flip Book Pdf' })).toBeVisible(); }); diff --git a/tests/gutenberg/google-photos.spec.js b/tests/gutenberg/google-photos.spec.js new file mode 100644 index 0000000..75ed137 --- /dev/null +++ b/tests/gutenberg/google-photos.spec.js @@ -0,0 +1,49 @@ +const { test, expect } = require('@playwright/test'); + +let slug = 'playwright-elementor/gutenberg-google-photos'; + + +test.describe("Google Photos", () => { + test.beforeEach(async ({ page }) => { + await page.goto(slug); + await page.waitForLoadState('networkidle'); + }); + + test('Google Photos Carousel', async ({ page }) => { + await expect(page.getByText('Google Photos Carousel')).toBeVisible(); + await expect(page.locator('iframe').first().contentFrame().locator('.jx-imageset').first()).toBeVisible(); + }); + + test('Pro - Google Photos Gallery Player', async ({ page }) => { + await expect(page.getByRole('heading', { name: 'Pro – Google Photos Gallery Player', exact: true })).toBeVisible(); + await expect(page.locator('iframe').nth(1).contentFrame().locator('.jx-imageset').first()).toBeVisible(); + await expect(page.locator('iframe').nth(1).contentFrame().locator('div:nth-child(8) > .jx-svg-image > svg')).toBeVisible(); + await page.locator('iframe').nth(1).contentFrame().locator('div:nth-child(7) > .jx-svg-image > svg').click(); + await expect(page.locator('iframe').nth(1).contentFrame().locator('div:nth-child(2) > .jx-imageset > div > img:nth-child(2)')).toBeVisible(); + await expect(page.locator('iframe').nth(1).contentFrame().locator('div:nth-child(7)')).toBeVisible(); + await expect(page.locator('iframe').nth(1).contentFrame().locator('.jx-carousel-arrow > .jx-svg-image > svg').first()).toBeVisible(); + await page.locator('iframe').nth(1).contentFrame().locator('.jx-carousel-arrow > .jx-svg-image > svg').first().click(); + await expect(page.locator('iframe').nth(1).contentFrame().locator('.jx-imageset').first()).toBeVisible(); + }); + + test('Pro - Google Photos Gallery Player - Auto Play & Repeat On', async ({ page }) => { + await expect(page.getByRole('heading', { name: 'Pro – Google Photos Gallery Player – Auto Play & Repeat On' })).toBeVisible(); + await expect(page.locator('iframe').nth(2).contentFrame().locator('div:nth-child(4) > .jx-imageset')).toBeVisible(); + await expect(page.locator('iframe').nth(2).contentFrame().locator('div:nth-child(2) > .jx-imageset > div > img:nth-child(2)')).toBeVisible(); + await expect(page.locator('iframe').nth(2).contentFrame().locator('div:nth-child(3) > .jx-imageset > div > img:nth-child(2)')).toBeVisible(); + await expect(page.locator('iframe').nth(2).contentFrame().locator('div:nth-child(4) > .jx-imageset > div > img:nth-child(2)')).toBeVisible(); + await expect(page.locator('iframe').nth(2).contentFrame().locator('img:nth-child(2)').first()).toBeVisible(); + await expect(page.locator('iframe').nth(2).contentFrame().locator('div:nth-child(8) > .jx-svg-image > svg')).toBeVisible(); + }); + + test('Single Photo - With Color', async ({ page }) => { + await expect(page.getByRole('heading', { name: 'Single Photo – With Color' })).toBeVisible(); + await page.locator('iframe').nth(3).contentFrame().getByRole('img').nth(1).click(); + await expect(page.locator('iframe').nth(3).contentFrame().getByRole('link', { name: 'New item by Md. Nahid Hasan' })).toBeVisible(); + await page.locator('iframe').nth(3).contentFrame().locator('div:nth-child(7)').click(); + }); + + + +}); + diff --git a/tests/gutenberg/modern_pdf.spec.js b/tests/gutenberg/modern_pdf.spec.js index 977ab44..f01dc49 100644 --- a/tests/gutenberg/modern_pdf.spec.js +++ b/tests/gutenberg/modern_pdf.spec.js @@ -7,6 +7,7 @@ let heading = 'Gutenberg Modern pdf'; test.describe("Gutenberg Modern PDF", () => { test.beforeEach(async ({ page }) => { await page.goto(slug); + await page.waitForLoadState('networkidle'); await expect.soft(page.getByRole('heading', { name: heading, exact: true })).toBeVisible(); }); diff --git a/tests/gutenberg/spotify.spec.js b/tests/gutenberg/spotify.spec.js index e089a77..e041df4 100644 --- a/tests/gutenberg/spotify.spec.js +++ b/tests/gutenberg/spotify.spec.js @@ -6,6 +6,7 @@ let slug = 'playwright-gutenberg/gutenberg-spotify'; test.describe("Gutenberg Spotify", () => { test.beforeEach(async ({ page }) => { await page.goto(slug); + await page.waitForLoadState('networkidle'); }); test('Spotify Single', async ({ page }) => { @@ -77,9 +78,9 @@ test.describe("Gutenberg Spotify", () => { await expect(framelocator.getByTestId('play-pause-button')).toBeVisible(); await framelocator.getByTestId('play-pause-button').click(); - await page.waitForTimeout(500); + // await page.waitForTimeout(500); - await framelocator.getByTestId('play-pause-button').click(); + // await framelocator.getByTestId('play-pause-button').click(); }); }); \ No newline at end of file diff --git a/tests/gutenberg/spreaker.spec.js b/tests/gutenberg/spreaker.spec.js index d368d24..8641d2e 100644 --- a/tests/gutenberg/spreaker.spec.js +++ b/tests/gutenberg/spreaker.spec.js @@ -3,9 +3,10 @@ const { test, expect } = require('@playwright/test'); let slug = 'gutenberg-spreaker'; -test.describe("Soreaker Gutenberg", () => { +test.describe("Spreaker Gutenberg", () => { test.beforeEach(async ({ page }) => { await page.goto(slug); + await page.waitForLoadState('networkidle'); await expect(page.getByRole('heading', { name: 'Gutenberg Spreaker' })).toBeVisible(); }); // Spreaker Playlist @@ -23,11 +24,10 @@ test.describe("Soreaker Gutenberg", () => { // Define locators for elements within the iframe const elementsToCheck = [ - // { locator: frame.getByRole('link', { name: 'The Deadliest Mountain on' }), description: 'Episode link' }, { locator: frame.getByLabel('Listen on Spreaker'), description: 'Listen on Spreaker button' }, { locator: frame.getByRole('link', { name: 'Privacy Policy' }), description: 'Privacy Policy link' }, { locator: frame.getByRole('img', { name: 'The Deadliest Mountain on' }).first(), description: 'Episode image' }, - { locator: frame.getByLabel('Play episode The Deadliest').first(), description: 'Play button' }, + { locator: frame.getByLabel('Play episode The Deadliest Mountain on Earth').first(), description: 'Play button' }, { locator: frame.getByLabel('Skip back 10 seconds'), description: 'Skip back button' }, { locator: frame.getByLabel('Skip forward 30 seconds'), description: 'Skip forward button' }, { locator: frame.getByLabel('Like episode'), description: 'Like button' }, @@ -36,8 +36,6 @@ test.describe("Soreaker Gutenberg", () => { { locator: frame.getByLabel('player.download_episode'), description: 'Download button' }, { locator: frame.locator('.button_info').first(), description: 'Info button' }, { locator: frame.getByText('The Deadliest Mountain on Earthepisode_explicit16:'), description: 'Episode text' }, - { locator: frame.getByRole('list').getByLabel('Play episode The Deadliest'), description: 'Play episode list item' }, - { locator: frame.getByRole('list').getByRole('img', { name: 'The Deadliest Mountain on' }), description: 'Episode list image' }, { locator: frame.locator('li').filter({ hasText: 'The Deadliest Mountain on' }).locator('span'), description: 'Episode span' }, { locator: frame.locator('li').filter({ hasText: 'The Deadliest Mountain on' }).getByLabel('Read description'), description: 'Read description button' }, ]; @@ -48,8 +46,8 @@ test.describe("Soreaker Gutenberg", () => { } // Interact with play and pause buttons - const playButton = frame.getByLabel('Play episode The Deadliest').first(); - const pauseButton = frame.getByLabel('Pause episode The Deadliest').first(); + const playButton = frame.getByLabel('Play episode The Deadliest Mountain on Earth').first(); + const pauseButton = frame.getByLabel('Pause episode The Deadliest Mountain on Earth').first(); await playButton.click(); await page.waitForTimeout(500); // Small delay to simulate playback @@ -60,9 +58,9 @@ test.describe("Soreaker Gutenberg", () => { // Assert that the element has the expected class await expect(cssElement).toHaveClass(/widget theme_light theme_with_playlist/); - }); + // Enable Pro Features test('Enable Pro Features', async ({ page }) => { // Check the main heading visibility @@ -71,9 +69,7 @@ test.describe("Soreaker Gutenberg", () => { await expect(heading).toBeVisible(); // Define a common locator for the embedded iframe - const iframeLocator = page - .locator('.wp-block-group > .wp-block-group > [id="\\33 21d67dc-8e7a-4c3e-8270-d28d0c58a35f"] > .wp-block-embed__wrapper > #ep-gutenberg-content-309519c8aa6759d7384069d7a70f4aeb > div > .ep-embed-content-wraper > .ose-spreaker > iframe') - .first(); + const iframeLocator = page.locator('iframe[title="This is title"]').nth(1); // Access the iframe's content frame const frame = await iframeLocator.contentFrame(); @@ -121,9 +117,7 @@ test.describe("Soreaker Gutenberg", () => { await expect(heading).toBeVisible(); // Define a common locator for the embedded iframe - const iframeLocator = page - .locator('div:nth-child(3) > .wp-block-group > [id="\\33 21d67dc-8e7a-4c3e-8270-d28d0c58a35f"] > .wp-block-embed__wrapper > #ep-gutenberg-content-309519c8aa6759d7384069d7a70f4aeb > div > .ep-embed-content-wraper > .ose-spreaker > iframe') - .first(); + const iframeLocator = page.locator('iframe[title="This is title"]').nth(2) // Access the iframe's content frame const frame = await iframeLocator.contentFrame(); diff --git a/tests/gutenberg/youtube.spec.js b/tests/gutenberg/youtube.spec.js index 3e4d34a..a1e7383 100644 --- a/tests/gutenberg/youtube.spec.js +++ b/tests/gutenberg/youtube.spec.js @@ -5,6 +5,7 @@ let slug = 'playwright-gutenberg/gutenberg-youtube'; test.describe("Gutenberg YouTube", () => { test.beforeEach(async ({ page }) => { await page.goto(slug); + await page.waitForLoadState('networkidle'); }); test('YouTube Channel Gallery Layout', async ({ page }) => { @@ -33,7 +34,7 @@ test.describe("Gutenberg YouTube", () => { - test('YouTube Chanel List Layout', async ({ page }) => { + test('YouTube Channel List Layout', async ({ page }) => { const heading = page.getByRole('heading', { name: 'YouTube Chanel List' }); await heading.scrollIntoViewIfNeeded(); await expect(heading).toBeVisible(); @@ -49,7 +50,7 @@ test.describe("Gutenberg YouTube", () => { }); - test('YouTube Chanel Grid Layout', async ({ page }) => { + test('YouTube Channel Grid Layout', async ({ page }) => { const expectations = [ { element: page.getByRole('heading', { name: 'YouTube Chanel Grid' }) }, @@ -70,8 +71,6 @@ test.describe("Gutenberg YouTube", () => { const nextEpisodeButton = page.locator('.ep-next').first(); await nextEpisodeButton.click(); await expect(page.locator('.ep-prev').first()).toBeVisible(); - - }); @@ -84,8 +83,6 @@ test.describe("Gutenberg YouTube", () => { await expect(page.getByRole('link', { name: 'Subscribe' }).nth(3)).toBeVisible(); await expect(page.getByRole('button', { name: '❮' })).toBeVisible(); await expect(page.getByRole('button', { name: '❯' })).toBeVisible(); - await expect(page.locator('div:nth-child(4) > #ab00cc1d-ce27-4096-acea-0ce8eedb17e0 > .wp-block-embed__wrapper > #ep-gutenberg-content-9fb3b6005a21730a9ea83dd1fbf1f613 > div > .ep-embed-content-wraper > .ose-youtube > .ep-player-wrap > .ep-youtube__content__block > .youtube__content__body > .content__wrap > div > .thumb').first()).toBeVisible(); - await page.getByRole('button', { name: '❯' }).click(); }); test('Default YouTube', async ({ page }) => {