How do I change the zoom level of a webpage using Playwright?

Answer

Increase Zoom Level with Playwright

To increase the zoom level in Playwright, you can use the page.setViewportSize() method or manipulate the CSS zoom property with page.evaluate().

Set Viewport Size

By setting a larger viewport size, you effectively increase the zoom level of the page. Here's an example:

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

test('Increase zoom level using viewport size', async ({ page }) => {
  await page.goto('https://ray.run');
  await page.setViewportSize({ width: 1920, height: 1080 });
});

Manipulate CSS Zoom Property

You can also use page.evaluate() to set the CSS zoom property of an element on a webpage:

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

test('Increase zoom level using CSS zoom property', async ({ page }) => {
  await page.goto('https://ray.run');
  await page.evaluate(() => {
    const element = document.querySelector('#my-element');
    if (element) {
      element.style.zoom = '150%';
    }
  });
});

This code selects an element with ID "my-element" and sets its CSS zoom property to 150%, effectively increasing its size and thus increasing overall zoom level.

Keep in mind that changing zoom levels can affect how elements are positioned and sized on a webpage. Test your application thoroughly after making any changes related to zoom levels.