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


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.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.