Mocking Swipe Action in Playwright (Typescript)

Playwright is an automation tool first released in January 2020 for web/mobile browsers.

It supports many modern browsers including Chrome, Firefox, and Safari. It does have friendly API that supports developers to quickly get used to it.

Swipe is an action of mobile devices. Recently, Playwright does not support API to stimulate swipe. But we still have some work around method for this.

1. Download and install lastest NodeJS version (include npm) at here.

2. Create a project folder with name as you wish. Open cmd in this folder and type “npm init playwright”

3. Follow steps and your Playwright project is ready to go. Quite easy, isn’t it?

* Note that the folder contains test case in my project is “e2e_tests”. It might be different from yours.

Consider an example in real-life project which you have to stimulate swipe action to switch between these hero carousel at this url.

You will be aware that an “example.spec.ts” file is generated for you. Clear its content and replace with this:

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

test('has title', async ({ page }) => {

  // go to url
  await page.goto('https://ericsson.com');

  // click to close Accept Cookie banner
  await page.click('a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll');

  // find the bounding box of element
  const box = await page.locator('div.slick-current').boundingBox();
  const pos = {
    x: box!.x + box!.width / 2,
    y: box!.y + box!.height / 2
  }

  const loopTimes = 4;

  // swipe to the left
  for (let i = 0; i < loopTimes; i++) {
    // move mouse to center of element
    await page.mouse.move(pos.x, pos.y);
    await page.waitForTimeout(1000);

    // emit mouse down event
    await page.mouse.down();
    await page.waitForTimeout(1000);

    // move mouse to the left horizontally about 500 pixels 
    await page.mouse.move(pos.x - 500, pos.y);
    await page.waitForTimeout(1000);

    // emit mouse up event (complete mocking swipe action)
    await page.mouse.up();
  }

  // swipe to the left
  for (let i = 0; i < loopTimes; i++) {
    // move mouse to center of element
    await page.mouse.move(pos.x, pos.y);
    await page.waitForTimeout(1000);

    // emit mouse down event
    await page.mouse.down();
    await page.waitForTimeout(1000);

    // move mouse to the right horizontally about 500 pixels
    await page.mouse.move(pos.x + 500, pos.y);
    await page.waitForTimeout(1000);

    // emit mouse up event (complete mocking swipe action)
    await page.mouse.up();
  }
});

* Let’s break down each line:

=> To mock swipe action, we need the in-build function from Mouse class as you can read for more details at here (https://playwright.dev/docs/api/class-mouse).

  const box = await page.locator('div.slick-current').boundingBox();
  const pos = {
    x: box!.x + box!.width / 2,
    y: box!.y + box!.height / 2
  }

=> Anyway, the idea is you will need to get the bounding box of element (it is the smallest possible rectangle aligned with the axes of that element’s user coordinate system that entirely encloses it and its descendants).

The bounding box of element will contains element’s x and y coordinate, also width and height. The element I choose here is the current active hero carousel (a div tag with class name = “slick-current”)

await page.mouse.move(pos.x, pos.y);

=> First action is move mouse to the center of element.

await page.mouse.down();

=> Next is emit mouse down event

await page.mouse.move(pos.x - 500, pos.y);

=> After that, you will need to identify which direction you want to swipe. If you want to swipe slides to the right side, you will need to move mouse horizontally to the left about a mount of pixels. In this case, 500 pixels is enough (it might differ with your real case).

await page.mouse.up();

=> Lastly, just emit mouse up event to finish mocking swipe action.

And I use a loop up to 4 times to repetively mock swipe action. Full swiping gesture can be watched as below:

Swipe action is a native mobile gestures. Playwright recently does not support this feature. But in the meantime, you can use this work-around method as alternative. Thanks for reading!

Nguyễn Ngọc Sơn

I used to be a back-end Java and PHP developer but now I found joy in automation testing engineer position and sharing knowledge about it

See author's posts