diff --git a/e2e/hotkeys.spec.ts b/e2e/hotkeys.spec.ts index d3db5845fd1..306a1658be4 100644 --- a/e2e/hotkeys.spec.ts +++ b/e2e/hotkeys.spec.ts @@ -1,4 +1,4 @@ -import { test, expect } from '@playwright/test'; +import { test, expect, type Page } from '@playwright/test'; import translations from '../client/i18n/locales/english/translations.json'; import { authedRequest } from './utils/request'; @@ -22,6 +22,11 @@ const links = { '/learn/python-for-everybody/python-for-everybody/introduction-hardware-architecture' }; +// The hotkeys are attached to specific elements, so we need to wait for the +// wrapper to be focused before we can test the hotkeys. +const waitUntilListening = async (page: Page) => + await expect(page.locator('#editor-layout')).toBeFocused(); + test.use({ storageState: 'playwright/.auth/certified-user.json' }); test.beforeAll(async ({ request }) => { @@ -43,6 +48,12 @@ test.beforeEach(async ({ page }) => { await keyboardShortcutGroup .getByRole('button', { name: translations.buttons.on, exact: true }) .click(); + // wait for the client to register the change: + await expect( + page + .getByRole('alert') + .filter({ hasText: translations.flash['keyboard-shortcut-updated'] }) + ).toBeVisible(); }); test.afterEach( @@ -58,13 +69,6 @@ test.afterEach( ); test('User can use shortcuts in and around the editor', async ({ page }) => { - // TODO: getByRole('alert', name: - // translations.flash['keyboard-shortcut-updated']) did not find the alert. - // Should it a) be an alert and b) have a name? - await expect( - page.getByText(translations.flash['keyboard-shortcut-updated']) - ).toBeVisible(); - await page.goto(course); await expect(getEditors(page)).toBeFocused(); @@ -74,18 +78,12 @@ test('User can use shortcuts in and around the editor', async ({ page }) => { await page.keyboard.press('n'); const nextCourse = '**/declare-javascript-variables'; await page.waitForURL(nextCourse); - // Ensure that the page content is loaded before simulating user interactions. - await expect( - page.getByRole('heading', { name: 'Declare JavaScript Variables' }) - ).toBeVisible(); + await waitUntilListening(page); await page.keyboard.press('p'); const previousCourse = '**/comment-your-javascript-code'; await page.waitForURL(previousCourse); - // Ensure that the page content is loaded before simulating user interactions. - await expect( - page.getByRole('heading', { name: 'Comment Your JavaScript Code' }) - ).toBeVisible(); + await waitUntilListening(page); await page.keyboard.press('e'); await expect(getEditors(page)).toBeFocused(); @@ -99,14 +97,13 @@ test('User can use shortcuts to navigate between frontend projects', async ({ page }) => { await page.goto(links.frontEnd1); - await expect(page.locator('#editor-layout')).toBeFocused(); + await waitUntilListening(page); await page.keyboard.press('Escape'); - await page.keyboard.press('n'); + await page.keyboard.press('n'); await page.waitForURL(links.frontEnd2); - await expect(page.locator('#editor-layout')).toBeFocused(); + await waitUntilListening(page); await page.keyboard.press('p'); - await page.keyboard.press('Escape'); await page.waitForURL(links.frontEnd1); }); @@ -114,14 +111,13 @@ test('User can use shortcuts to navigate between backend projects', async ({ page }) => { await page.goto(links.backEnd1); - await expect(page.locator('#editor-layout')).toBeFocused(); + await waitUntilListening(page); await page.keyboard.press('Escape'); - await page.keyboard.press('n'); + await page.keyboard.press('n'); await page.waitForURL(links.backEnd2); - await expect(page.locator('#editor-layout')).toBeFocused(); + await waitUntilListening(page); await page.keyboard.press('p'); - await page.keyboard.press('Escape'); await page.waitForURL(links.backEnd1); }); @@ -129,13 +125,12 @@ test('User can use shortcuts to navigate between video-based challenges', async page }) => { await page.goto(links.video1); - await expect(page.locator('#editor-layout')).toBeFocused(); + await waitUntilListening(page); await page.keyboard.press('Escape'); - await page.keyboard.press('n'); + await page.keyboard.press('n'); await page.waitForURL(links.video2); - await expect(page.locator('#editor-layout')).toBeFocused(); + await waitUntilListening(page); await page.keyboard.press('p'); - await page.keyboard.press('Escape'); await page.waitForURL(links.video1); });