События касания (устаревшие)

Введение

Веб-приложения, которые обрабатывают устаревшие события касания для реагирования на жесты, такие как смахивание, сжатие и нажатие, могут быть протестированы путем ручной отправки TouchEvents на страницу. Примеры ниже демонстрируют, как использовать locator.dispatchEvent() и передавать Touch точки в качестве аргументов.

Эмуляция жеста панорамирования

В приведенном ниже примере мы эмулируем жест панорамирования, который должен переместить карту. Приложение, которое мы тестируем, использует только координаты clientX/clientY точки касания, поэтому мы инициализируем только их. В более сложном сценарии вам может потребоваться также установить pageX/pageY/screenX/screenY, если ваше приложение требует их.

import { test, expect, devices, type Locator } from '@playwright/test';

test.use({ ...devices['Pixel 7'] });

async function pan(locator: Locator, deltaX?: number, deltaY?: number, steps?: number) {
  const { centerX, centerY } = await locator.evaluate((target: HTMLElement) => {
    const bounds = target.getBoundingClientRect();
    const centerX = bounds.left + bounds.width / 2;
    const centerY = bounds.top + bounds.height / 2;
    return { centerX, centerY };
  });

  // Предоставляем только clientX и clientY, так как приложение заботится только об этом.
  const touches = [{
    identifier: 0,
    clientX: centerX,
    clientY: centerY,
  }];
  await locator.dispatchEvent('touchstart',
      { touches, changedTouches: touches, targetTouches: touches });

  steps = steps ?? 5;
  deltaX = deltaX ?? 0;
  deltaY = deltaY ?? 0;
  for (let i = 1; i <= steps; i++) {
    const touches = [{
      identifier: 0,
      clientX: centerX + deltaX * i / steps,
      clientY: centerY + deltaY * i / steps,
    }];
    await locator.dispatchEvent('touchmove',
        { touches, changedTouches: touches, targetTouches: touches });
  }

  await locator.dispatchEvent('touchend');
}

test(`жест панорамирования для перемещения карты`, async ({ page }) => {
  await page.goto('https://www.google.com/maps/place/@37.4117722,-122.0713234,15z',
      { waitUntil: 'commit' });
  await page.getByRole('button', { name: 'Продолжить использование веба' }).click();
  await expect(page.getByRole('button', { name: 'Продолжить использование веба' })).not.toBeVisible();
  // Получаем элемент карты.
  const met = page.locator('[data-test-id="met"]');
  for (let i = 0; i < 5; i++)
    await pan(met, 200, 100);
  // Убедитесь, что карта была перемещена.
  await expect(met).toHaveScreenshot();
});

Эмуляция жеста сжатия

В приведенном ниже примере мы эмулируем жест сжатия, т.е. два касания, которые приближаются друг к другу. Ожидается, что это уменьшит масштаб карты. Приложение, которое мы тестируем, использует только координаты clientX/clientY точек касания, поэтому мы инициализируем только их. В более сложном сценарии вам может потребоваться также установить pageX/pageY/screenX/screenY, если ваше приложение требует их.

import { test, expect, devices, type Locator } from '@playwright/test';

test.use({ ...devices['Pixel 7'] });

async function pinch(locator: Locator,
  arg: { deltaX?: number, deltaY?: number, steps?: number, direction?: 'in' | 'out' }) {
  const { centerX, centerY } = await locator.evaluate((target: HTMLElement) => {
    const bounds = target.getBoundingClientRect();
    const centerX = bounds.left + bounds.width / 2;
    const centerY = bounds.top + bounds.height / 2;
    return { centerX, centerY };
  });

  const deltaX = arg.deltaX ?? 50;
  const steps = arg.steps ?? 5;
  const stepDeltaX = deltaX / (steps + 1);

  // Два касания, равномерно удаленные от центра элемента.
  const touches = [
    {
      identifier: 0,
      clientX: centerX - (arg.direction === 'in' ? deltaX : stepDeltaX),
      clientY: centerY,
    },
    {
      identifier: 1,
      clientX: centerX + (arg.direction === 'in' ? deltaX : stepDeltaX),
      clientY: centerY,
    },
  ];
  await locator.dispatchEvent('touchstart',
      { touches, changedTouches: touches, targetTouches: touches });

  // Перемещаем точки касания ближе или дальше друг от друга.
  for (let i = 1; i <= steps; i++) {
    const offset = (arg.direction === 'in' ? (deltaX - i * stepDeltaX) : (stepDeltaX * (i + 1)));
    const touches = [
      {
        identifier: 0,
        clientX: centerX - offset,
        clientY: centerY,
      },
      {
        identifier: 1,
        clientX: centerX + offset,
        clientY: centerY,
      },
    ];
    await locator.dispatchEvent('touchmove',
        { touches, changedTouches: touches, targetTouches: touches });
  }

  await locator.dispatchEvent('touchend', { touches: [], changedTouches: [], targetTouches: [] });
}

test(`жест сжатия для уменьшения масштаба карты`, async ({ page }) => {
  await page.goto('https://www.google.com/maps/place/@37.4117722,-122.0713234,15z',
      { waitUntil: 'commit' });
  await page.getByRole('button', { name: 'Продолжить использование веба' }).click();
  await expect(page.getByRole('button', { name: 'Продолжить использование веба' })).not.toBeVisible();
  // Получаем элемент карты.
  const met = page.locator('[data-test-id="met"]');
  for (let i = 0; i < 5; i++)
    await pinch(met, { deltaX: 40, direction: 'in' });
  // Убедитесь, что карта была уменьшена.
  await expect(met).toHaveScreenshot();
});