fix(e2e, playwright): resolved mobile test failures on desktop-layout-component.spec.ts (#52439)

This commit is contained in:
Rahul Suresh
2023-11-30 02:39:30 -06:00
committed by GitHub
parent 2ee4a0e366
commit d6cd19f567
+47 -35
View File
@@ -4,62 +4,74 @@ test.use({ storageState: 'playwright/.auth/certified-user.json' });
test.describe('Classic challenge - 3 pane desktop layout component', () => {
test('The page has desktop layout with instructions/editor/preview pane', async ({
page
page,
isMobile
}) => {
const desktopLayout = page.getByTestId('desktop-layout');
const actionRow = desktopLayout.getByTestId('action-row');
const tabsRow = desktopLayout.getByTestId('tabs-row');
const reflexContainer = desktopLayout.getByTestId('main-container');
const instructionPane = desktopLayout.getByTestId('instruction-pane');
const editorPane = desktopLayout.getByTestId('editor-pane');
const previewPane = desktopLayout.getByTestId('preview-pane');
await page.goto(
'learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
);
const desktopLayout = page.getByTestId('desktop-layout');
await expect(desktopLayout).toBeVisible();
const actionRow = desktopLayout.getByTestId('action-row');
await expect(actionRow).toBeVisible();
const tabsRow = desktopLayout.getByTestId('tabs-row');
await expect(tabsRow).toBeVisible();
const reflexContainer = desktopLayout.getByTestId('main-container');
await expect(reflexContainer).toBeVisible();
const instructionPane = desktopLayout.getByTestId('instruction-pane');
await expect(instructionPane).toBeVisible();
const editorPane = desktopLayout.getByTestId('editor-pane');
await expect(editorPane).toBeVisible();
const previewPane = desktopLayout.getByTestId('preview-pane');
await expect(previewPane).toBeVisible();
if (isMobile) {
await expect(desktopLayout).toBeHidden();
await expect(actionRow).toBeHidden();
await expect(tabsRow).toBeHidden();
await expect(reflexContainer).toBeHidden();
await expect(instructionPane).toBeHidden();
await expect(editorPane).toBeHidden();
await expect(previewPane).toBeHidden();
} else {
await expect(desktopLayout).toBeVisible();
await expect(actionRow).toBeVisible();
await expect(tabsRow).toBeVisible();
await expect(reflexContainer).toBeVisible();
await expect(instructionPane).toBeVisible();
await expect(editorPane).toBeVisible();
await expect(previewPane).toBeVisible();
}
});
});
test.describe('Classic challenge - 2 pane desktop layout component', () => {
test('The page has desktop layout with instructions/editor pane', async ({
page
page,
isMobile
}) => {
await page.goto(
'learn/javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers'
);
const desktopLayout = page.getByTestId('desktop-layout');
await expect(desktopLayout).toBeVisible();
const actionRow = desktopLayout.getByTestId('action-row');
await expect(actionRow).not.toBeVisible();
const tabsRow = desktopLayout.getByTestId('tabs-row');
await expect(tabsRow).not.toBeVisible();
const reflexContainer = desktopLayout.getByTestId('main-container');
await expect(reflexContainer).toBeVisible();
const instructionPane = desktopLayout.getByTestId('instruction-pane');
await expect(instructionPane).toBeVisible();
const editorPane = desktopLayout.getByTestId('editor-pane');
await expect(editorPane).toBeVisible();
const previewPane = desktopLayout.getByTestId('preview-pane');
await expect(previewPane).not.toBeVisible();
if (isMobile) {
await expect(desktopLayout).toBeHidden();
await expect(actionRow).toBeHidden();
await expect(tabsRow).toBeHidden();
await expect(reflexContainer).toBeHidden();
await expect(instructionPane).toBeHidden();
await expect(editorPane).toBeHidden();
await expect(previewPane).toBeHidden();
} else {
await expect(desktopLayout).toBeVisible();
await expect(actionRow).toBeHidden();
await expect(tabsRow).toBeHidden();
await expect(reflexContainer).toBeVisible();
await expect(instructionPane).toBeVisible();
await expect(editorPane).toBeVisible();
await expect(previewPane).toBeHidden();
}
});
});