From ef473d34f57566cb13aff0fc9d8c5d88261d09fc Mon Sep 17 00:00:00 2001
From: Otto Richter <git@otto.splvs.net>
Date: Sat, 14 Sep 2024 12:04:43 +0200
Subject: [PATCH] docs(e2e): Add parametric viewport example test
---
tests/e2e/example.test.e2e.js | 30 +++++++++++++++++++-----------
1 file changed, 19 insertions(+), 11 deletions(-)
diff --git a/tests/e2e/example.test.e2e.js b/tests/e2e/example.test.e2e.js
index 06c70d0355..86abdf685e 100644
--- a/tests/e2e/example.test.e2e.js
+++ b/tests/e2e/example.test.e2e.js
@@ -1,6 +1,6 @@
// @ts-check
import {expect} from '@playwright/test';
-import {test, login_user, save_visual, load_logged_in_context} from './utils_e2e.js';
+import {test, login_user, save_visual} from './utils_e2e.js';
test.beforeAll(async ({browser}, workerInfo) => {
await login_user(browser, workerInfo, 'user2');
@@ -29,14 +29,22 @@ test('Register Form', async ({page}, workerInfo) => {
save_visual(page);
});
-test('Logged In User', async ({browser}, workerInfo) => {
- const context = await load_logged_in_context(browser, workerInfo, 'user2');
- const page = await context.newPage();
-
- await page.goto('/');
-
- // Make sure we routed to the home page. Else login failed.
- await expect(page.url()).toBe(`${workerInfo.project.use.baseURL}/`);
-
- save_visual(page);
+// eslint-disable-next-line playwright/no-skipped-test
+test.describe.skip('example with different viewports (not actually run)', () => {
+ // only necessary when the default web / mobile devices are not enough.
+ // If you need to use a single fixed viewport, you can also use:
+ // test.use({viewport: {width: 400, height: 800}});
+ // also see https://playwright.dev/docs/test-parameterize
+ for (const width of [400, 1000]) {
+ // do not actually run (skip) this test
+ test(`Do x on width: ${width}px`, async ({page}) => {
+ await page.setViewportSize({
+ width,
+ height: 800,
+ });
+ // do something, then check that an element is fully in viewport
+ // (i.e. not overflowing)
+ await expect(page.locator('#my-element')).toBeInViewport({ratio: 1});
+ });
+ }
});