Browser Control in Playwright

Browser Control is the fourth chapter of the free Playwright tutorial. It goes beyond one page in one tab.

What each lesson covers:

  • Browser Contexts, Pages, and Emulation: Contexts for separate users, several pages and popups, viewports and devices, locale, time zone, geolocation, permissions, dark mode and more.
  • Handling Complex Page Elements: Frames, Shadow DOM, dialogs, surprise overlays, file uploads and downloads, the keyboard and mouse, drag and drop, lists and the clipboard.

A browser context is like a fresh browser profile, with its own cookies and storage. The first lesson uses contexts to test two users at once, opens new tabs and popups, and emulates phones and tablets with viewport and device settings. It also sets the locale, time zone, location, permissions and dark mode for a test. The second lesson handles the parts of a page that often break tests: content inside frames and Shadow DOM, browser dialogs, overlays that appear without warning, file uploads and downloads, low-level keyboard and mouse input, drag and drop, long lists and the clipboard.

Every test box runs in the Playwright lab in your browser, in TypeScript or JavaScript. Each lesson ends with graded exercises.

Lessons in this section

  1. Browser Contexts, Pages, and Emulation

    The browser, context and page hierarchy, how contexts isolate tests, creating contexts for multi-user tests, working with several pages, popups and new windows, setting the viewport and emulating devices, locale, timezone, geolocation and permissions, colour scheme, reduced motion, user agent and disabling JavaScript.

    • Explain how browser contexts isolate tests
    • Test two users at once with two contexts
    • Handle new tabs and popups
    • Emulate phones, viewports, locales, time zones and geolocation
  2. Handling Complex Page Elements

    Frames and nested frames, Shadow DOM and its limits, alert, confirm, prompt and beforeunload dialogs, unexpected overlays with addLocatorHandler, file uploads and file choosers, downloads, the keyboard and mouse APIs, drag and drop, working with lists, and the clipboard.

    • Work inside frames and nested frames
    • Explain how locators pass into Shadow DOM, and where they stop
    • Accept, dismiss and answer browser dialogs
    • Remove surprise overlays with addLocatorHandler