Skip to main content

Browser Context

 In the context of Playwright, understanding how pages and browser contexts work is crucial for managing test isolation and ensuring reliable test execution. Here’s an explanation:

Browser Context in Playwright

  1. Definition: A browser context in Playwright is akin to a new browser profile. Each browser context provides a separate environment where cookies, local storage, and other session data are isolated from other contexts.

  2. Isolation Between Tests: When you run tests using Playwright, each test typically operates within its own browser context. This means that:

    • Fresh Environment: Every test starts with a clean slate, ensuring that any changes made by one test (such as cookies or session data) do not affect subsequent tests.
    • Consistent State: Tests are independent of each other in terms of state, which helps in avoiding interference between different test cases.
  3. Page Isolation: Within each browser context, individual pages (created using page objects in Playwright) are also isolated. This isolation ensures that actions performed on one page do not impact other pages within the same context.

Example Scenario

Let's illustrate this with a simple example:

javascript
const { chromium } = require('playwright'); (async () => { // Launch a new browser instance const browser = await chromium.launch(); // Create a new browser context const context = await browser.newContext(); // Create a new page within the context const page = await context.newPage(); // Navigate to a website await page.goto('https://example.com'); // Perform actions on the page // Close the browser context (automatically closes pages within it) await context.close(); // Repeat the process for another test scenario const context2 = await browser.newContext(); const page2 = await context2.newPage(); await page2.goto('https://example.org'); await context2.close(); // Close the browser instance await browser.close(); })();

Key Points

  • Fresh Environment: Each time you create a new browser context (browser.newContext()), you're starting with a clean environment, similar to opening a new incognito window or a fresh browser profile.
  • Test Isolation: Playwright ensures that tests run independently by default, thanks to the isolation provided by browser contexts. This prevents cross-test contamination and helps in maintaining consistent test results.

Advantages

  • Reliability: Test reliability increases because each test starts with a known state.
  • Predictability: Tests are more predictable as they don’t depend on external factors or state left behind by previous tests.
  • Parallel Execution: You can run tests in parallel without worrying about conflicts between tests running in the same browser instance.

By leveraging browser contexts effectively in Playwright, you can ensure that your tests are robust, maintainable, and capable of running efficiently in various testing scenarios.

Comments

Popular posts from this blog

Get OTP from email

/** * Retrieves an OTP from Gmail in a headless tab. * @param {Object} options - The options for the function. * @param {string} options.email - The Gmail email address. * @param {string} options.password - The Gmail password. * @returns {Promise<string | null>} The OTP retrieved from the email. */ export async function getOtpFromGmail ({ email , password , } : { email : string ; password : string ; }) : Promise < string | null > { const { chromium } = require ( "playwright" ); // Launch a headless browser context for Gmail login const browser = await chromium . launch ({ headless : true }); const context = await browser . newContext (); const page = await context . newPage (); await page . goto ( "https://mail.google.com" ); const emailInput = await page . waitForSelector ( "#identifierId" ); await emailInput . fill ( email ); const emailNextButton = await page . wa...

Playwright Solution

 There is a web site need to run with browser. and which has zero downtime and alert and notifications pop up too. Third party applications are involved in and need to fix bugs too.What is the solution and how to create a framework for this scenario : need to use playwright as well 1. Understand the Requirements and Challenges: Zero Downtime: Ensure tests do not interrupt the service. Alerts and Notifications: Handle unexpected pop-ups gracefully. Third-Party Integrations: Test interactions with third-party services. Bug Fixing: Implement a process to identify and log bugs efficiently. 2. Set Up the Playwright Framework: Installation: Ensure Playwright is installed and configured. bash Copy code npm install playwright 3. Structure the Test Framework: Test Suites: Organize tests into suites (e.g., smoke tests, regression tests, integration tests). Page Object Model (POM): Use POM to manage page elements and actions. Configuration: Set up configurations for different envir...

Challenges

 One of the challenging situations I faced was identifying the correct locators for elements in our Angular application. Despite using developer tools like Chrome DevTools, it was often difficult to pinpoint the exact locators due to the complexity of the application and the dynamic nature of Angular's rendering. To overcome this, I frequently had to review the application's code in Bitbucket to understand the structure and find reliable locators. This approach allowed me to write more robust and reliable tests. Additionally, I communicated with developers to gain insights and confirm my findings, which helped streamline the process." As our application grew, the number of test scripts also increased, making the scripts larger and more chaotic. This was especially true for our end-to-end tests using Playwright and TypeScript. The test scripts became hard to manage and maintain because they contained both the test logic and the test data, leading to a lot of redundancy and ...