test: use challenge with visible buttons for spec (#54566)

This commit is contained in:
Oliver Eyton-Williams
2024-04-29 19:38:13 +02:00
committed by GitHub
parent 9f7ecffc0d
commit 868a7c62bf
5 changed files with 15 additions and 28 deletions

View File

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
test.beforeEach(async ({ page }) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
});

View File

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
test.beforeEach(async ({ page }) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
});

View File

@@ -3,7 +3,7 @@ import translations from '../client/i18n/locales/english/translations.json';
test.beforeEach(async ({ page }) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
});

View File

@@ -1,31 +1,18 @@
import { expect, test, type Page } from '@playwright/test';
let page: Page;
test.beforeAll(async ({ browser }) => {
page = await browser.newPage();
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
);
});
import { expect, test } from '@playwright/test';
test.describe('Progress bar component', () => {
test('Should appear with the correct content after the user has submitted their code', async ({
isMobile,
browserName
page
}) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
);
const monacoEditor = page.getByLabel('Editor content');
// The editor has an overlay div, which prevents the click event from bubbling up in iOS Safari.
// This is a quirk in this browser-OS combination, and the workaround here is to use `.focus()`
// in place of `.click()` to focus on the editor.
// Ref: https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
if (isMobile && browserName === 'webkit') {
await monacoEditor.focus();
} else {
await monacoEditor.click();
}
// Using focus instead of click since we're not testing if the editor
// behaves correctly, we're using it to complete the challenge.
await monacoEditor.focus();
await page.keyboard.press('Control+A');
//Meta + A works in webkit
await page.keyboard.press('Meta+A');

View File

@@ -4,7 +4,7 @@ import translations from '../client/i18n/locales/english/translations.json';
test('should render the modal content correctly', async ({ page }) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
await page.getByRole('button', { name: translations.buttons.reset }).click();
@@ -48,7 +48,7 @@ test('User can reset challenge', async ({ page }) => {
.getByText(updatedText);
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
// Building the preview can take a while
@@ -137,7 +137,7 @@ test('User can reset classic challenge', async ({ page, isMobile }) => {
test('should close when the user clicks the close button', async ({ page }) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
await page.getByRole('button', { name: translations.buttons.reset }).click();