[Feature]: add `expect(page).toBeResponsive()` to `PageAssertions` about playwright

[hamirmahal]

This could maybe go under https://playwright.dev/docs/api/class-pageassertions.

[hamirmahal]

I tried

import { title } from '@/app/matrix';
import { expect, test } from '@playwright/test';

test('the page is responsive after starting to process large input', async ({ page }) => {
  const input_textarea = page.getByTitle(title);
  await page.goto('http://localhost:3000/');
  await input_textarea.waitFor();
  await input_textarea.fill('[[1,10,7,10,14,20],[2,12,6,10,1,10],[3,5,6,7,4,2],[4,3,1,1,2,10],[3,40,5,20,20,10]]');
  await expect(input_textarea).toBeEditable();
});

But this test passes, whereas if I tried doing this in production the page would hang for a while, and freeze for even longer for certain text input.

[yury-s]

Can you just simulate the same actions that you do manually to check if the page is responsive and measure that they take reasonable time? E.g. try to fill another text field on the page and check that it doesn't time out, would that work?

[hamirmahal]

Hmm... That doesn't seem to work.

import { title } from '@/app/matrix';
import { expect, test } from '@playwright/test';

test('the page is responsive after starting to process large input', async ({ page }) => {
  const input_textarea = page.getByTitle(title);
  await page.goto('http://localhost:3000/');
  await input_textarea.waitFor();
  await input_textarea.fill('[[8, 3, 1, 9, 5, 4, 6, 0, 2, 7], [4, 2, 8, 6, 0, 7, 3, 1, 9, 5], [7, 6, 0, 2, 8, 1, 5, 9, 4, 3], [1, 5, 9, 3, 7, 6, 8, 2, 0, 4], [6, 0, 4, 5, 3, 9, 7, 8, 1, 2], [9, 1, 5, 4, 2, 0, 3, 7, 6, 8], [2, 7, 3, 8, 4, 5, 9, 6, 0, 1], [3, 9, 2, 0, 1, 8, 4, 5, 7, 6], [5, 4, 6, 7, 9, 2, 1, 3, 8, 0], [0, 8, 7, 1, 6, 3, 2, 4, 5, 9]]');
  await expect(input_textarea).toBeEditable();
  await input_textarea.fill('[[0]]');
});

[hamirmahal]

If I enter that input on the page in production, I get this alert from the browser after the page freezes.

It would be nice if I could assert that this doesn't happen in a test environment.

[hamirmahal]

If it helps, https://max-matrix-path.vercel.app/ is the page that freezes in production with this input

[[8, 3, 1, 9, 5, 4, 6, 0, 2, 7], [4, 2, 8, 6, 0, 7, 3, 1, 9, 5], [7, 6, 0, 2, 8, 1, 5, 9, 4, 3], [1, 5, 9, 3, 7, 6, 8, 2, 0, 4], [6, 0, 4, 5, 3, 9, 7, 8, 1, 2], [9, 1, 5, 4, 2, 0, 3, 7, 6, 8], [2, 7, 3, 8, 4, 5, 9, 6, 0, 1], [3, 9, 2, 0, 1, 8, 4, 5, 7, 6], [5, 4, 6, 7, 9, 2, 1, 3, 8, 0], [0, 8, 7, 1, 6, 3, 2, 4, 5, 9]]