Examining the function of a playwright script for testing the capability of downloading files using the window.open

Question

Examining the function of a playwright script for testing the capability of downloading files using the window.open

Currently, we are working on a project that uses Vue3 for the frontend and we are writing tests for the application using Playwright. Within our components, there is a download icon that, when clicked, triggers a handler to retrieve a presigned URL from S3. This presigned URL is then opened using window.open(s3_URL).

Here is the code for the handler:

await axios(url, requestOptionsGet) // Fetches the presigned URL
    .then(response => {
      // Check for 200 or 400 responses
    })
    .then(async response => {
      const service_response = response as SERVICE_RESPONSE;
      const s3DownloadUrl = service_response?.url;
      window.open(s3DownloadUrl);// Opens the file in a new window for download
    })
    .catch(errorResponse => {
      // Handle any errors
    });

Now, we want to write Playwright tests for this functionality. Any suggestions on how to approach this would be greatly appreciated.

typescript vuejs3 playwright webapi

Answer 1

Answer №1

Successfully tested file download functionality using window.open() side effects. The code below represents a framework structure and not the exact code for confidentiality reasons.

However, it provides a clear outline of my approach to solving the issue.

test('should open a new window with the given URL', async ({ page }) => {
  const landingPage = new LandingPage(page);

  // Listen for the 'popup' event triggered by window.open
  let newPagePromise = page.waitForEvent('popup');
  await givenAllNetworkCallMocked();// mock necessary network calls.

  // Navigate to the test page
  await page.goto('/'); 

  await landingPage.fileDownloadButton.click();

  // Wait for the new window to open and capture the new page
  const newPage = await newPagePromise;

  // Verify the URL of the newly opened page
  await newPage.waitForLoadState('load');
  const newPageURL = newPage.url();
  expect(newPageURL).toBe('https://example.com');
});

Explanation:

Access the page object and initialize all the locators with it (completed in Landing page).
Use waitForEvent('popup') to receive the new page popup as a promise.
Mock all necessary network calls that need to be simulated.
Navigate to the main page and click on the download button.
Wait for the promise to resolve and validate the URL of the page.

That's the gist of it.

Answer 2

Successfully tested file download functionality using window.open() side effects. The code below represents a framework structure and not the exact code for confidentiality reasons.

However, it provides a clear outline of my approach to solving the issue.

test('should open a new window with the given URL', async ({ page }) => {
  const landingPage = new LandingPage(page);

  // Listen for the 'popup' event triggered by window.open
  let newPagePromise = page.waitForEvent('popup');
  await givenAllNetworkCallMocked();// mock necessary network calls.

  // Navigate to the test page
  await page.goto('/'); 

  await landingPage.fileDownloadButton.click();

  // Wait for the new window to open and capture the new page
  const newPage = await newPagePromise;

  // Verify the URL of the newly opened page
  await newPage.waitForLoadState('load');
  const newPageURL = newPage.url();
  expect(newPageURL).toBe('https://example.com');
});

Explanation:

Access the page object and initialize all the locators with it (completed in Landing page).
Use waitForEvent('popup') to receive the new page popup as a promise.
Mock all necessary network calls that need to be simulated.
Navigate to the main page and click on the download button.
Wait for the promise to resolve and validate the URL of the page.

That's the gist of it.

Examining the function of a playwright script for testing the capability of downloading files using the window.open

Answer №1

Similar questions

Extract data from Angular2 class

Running TypeScript Jest tests in Eclipse 2020-12: A step-by-step guide

Limit the selected values to calculate a partial sum

Setting up a ts-node project with ECMAScript modules. Issue: Unrecognized file extension ".ts"

Creating hierarchical TreeNode structure in TypeScript

Is there a technique to block small increments in a Time Input field?

Type guards do not work properly on a union of enum types in TypeScript

Using Angular 4 to delete selected rows based on user input in typescript

Localization of labels and buttons in Angular Owl Date Time Picker is not supported

Creating an array of strings using data from a separate array of objects in JavaScript/TypeScript

What is the best way to display HTML in this particular situation?

Developing an npm module encapsulating API contracts for seamless integration with front-end applications using Typescript

Piping in Angular 2 with injected dependencies

What is the method for launching Chrome synchronously in Selenium WebDriver using createSession()?

The ng-change event fails to trigger when the date change event is activated

Error in NextJS: Attempting to access a length property of null

Adding Axios package to a Vue 3 project without using the CLI

Trouble occurs in the HTML code when trying to access a property from an inherited interface in Angular

You are unable to assign to 'total' as it is a constant or a property that cannot be modified

Answer found: How to effectively filter data arrays in a React client application