diff --git a/e2e/progress-bar.spec.ts b/e2e/progress-bar.spec.ts
index 05aeebc1572..28ce001bf82 100644
--- a/e2e/progress-bar.spec.ts
+++ b/e2e/progress-bar.spec.ts
@@ -1,4 +1,5 @@
-import { test, expect, type Page } from '@playwright/test';
+import { expect, test, type Page } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
let page: Page;
@@ -10,9 +11,22 @@ test.beforeAll(async ({ browser }) => {
});
test.describe('Progress bar component', () => {
- test('Should appear with the correct content after the user has submitted their code', async () => {
+ test('Should appear with the correct content after the user has submitted their code', async ({
+ isMobile,
+ browserName
+ }) => {
const monacoEditor = page.getByLabel('Editor content');
- await monacoEditor.click();
+
+ // 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();
+ }
+
await page.keyboard.press('Control+A');
//Meta + A works in webkit
await page.keyboard.press('Meta+A');
@@ -21,9 +35,16 @@ test.describe('Progress bar component', () => {
await page.keyboard.insertText(
'CatPhotoApp
Cat Photos
'
);
- await page
- .getByRole('button', { name: 'Check Your Code (Ctrl + Enter)' })
- .click();
+
+ if (isMobile) {
+ await page
+ .getByRole('button', { name: translations.buttons['check-code-2'] })
+ .click();
+ } else {
+ await page
+ .getByRole('button', { name: translations.buttons['check-code'] })
+ .click();
+ }
const progressBarContainer = page.getByTestId('progress-bar-container');
await expect(progressBarContainer).toContainText(