Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Feature]: Safe area / Inset emulation

Closed
#43,283 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
playwright, typescript
Domain
testing-qa

Research direction

Start by reading Playwright’s browser emulation APIs and how viewport and screen sizes are configured. Check the Chromium debugging protocol support for Emulation.setSafeAreaInsetsOverride, then compare what WebKit and Firefox expose. Done means Playwright can configure safe area insets and overlays across the supported browser engines to test embedded mobile layouts.

Written by the indexing model from the issue text.

Description

🚀 Feature Request

It would be great if we specify viewport sizes separately from screen sizes, so as to allow testing against emulated versions of mobile browser rendering engines with insets and overlays (such as notification drawers and on-screen keyboards).

  • Chromium has official support for this in their debugging protocol (behind an experimental flag), via "Emulation.setSafeAreaInsetsOverride".
  • It's somewhat possible to do this in Webkit, as methods to do this are supported internally, but there are not currently any debug protocol or UI for setting anything like this.
  • Firefox does not yet ship anything that can be used for simulating this yet, so is in the same state as Webkit.
Example

No response

Motivation

Supporting this would allow for Playwright to be configured to better reflect browser environments when embedded inside apps on Android / iOS devices.

Dominant language
TypeScript
Stars
97.4k
Forks
6.6k
Avg merge
22h 17m
Merged PRs (30d)
278

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/playwright

All issues in microsoft/playwright

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.