greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(e2e, playwright): resolved mobile test failures editor.spec.ts (#52518) 

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
pull/52769/head
Rahul Suresh 2023-12-28 11:00:47 -06:00 committed by GitHub
parent de316c95bb
commit 1c5c87774c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
e2e/editor.spec.ts
View File

@ -1,4 +1,4 @@
import { test, expect } from '@playwright/test';
import { expect, test } from '@playwright/test';
test.beforeEach(async ({ page }) => {
await page.goto(
@ -7,9 +7,22 @@ test.beforeEach(async ({ page }) => {
});
test.describe('Editor Component', () => {
test('Should be clicked and able to insert text', async ({ page }) => {
test('should allow the user to insert text', async ({
page,
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.insertText('<h2>FreeCodeCamp</h2>');
const text = page.getByText('<h2>FreeCodeCamp</h2>');
await expect(text).toBeVisible();