Создание бесконечного скролла и E2E тест к нему

Бесконечный скролл позволяет загружать данные на страницу поэтапно, в процессе скролла пользователя. В блоге Wanago автор описал как работает бесконечный скролл с Intersection Observer для постраничной загрузки данных.

Для тестирования функционала используется библиотека Playwright. Узнать количество загруженных записей можно с помощью функции toHaveCount, а проскроллить до элемента-якоря можно с помощью scrollIntoViewIfNeeded:

import { expect, test } from '@playwright/test';
 
test.describe('The Posts page', () => {
  test.describe('when visited', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('/');
    });
    // ...
    test.describe('and when the user scrolls down', () => {
      test('should contain forty posts', async ({ page }) => {
        const posts = page.getByTestId('post');
 
        await expect(posts).toHaveCount(20);
 
        await page.getByTestId('loader').scrollIntoViewIfNeeded();
 
        await expect(posts).toHaveCount(40);
      });
    });
  });
});

https://wanago.io/2024/04/29/react-infinite-scrolling-e2e-playwright/