Ways to verify the element prior to the completion of the request?

Question

Ways to verify the element prior to the completion of the request?

Utilizing Angular and Playwright

Within my application, I have incorporated 2 buttons - one for delete mode and another for refreshing. Whenever the user triggers a refresh action, the delete mode button is disabled. Once the request returns, the delete mode button is re-enabled.

How can I create a test scenario where I click on the refresh button and verify that the delete mode button is disabled before the mocked request completes?

I've attempted the following approach but the assertion consistently passes even with attempts to use .not to potentially fail it (resulting in false positives).

it('should disable delete button during refresh', async ({ page }) => {
  const deleteBtn = page.getByRole('button', {name: 'enter delete mode'}).first();
  page.on('request', () => { expect(deleteBtn).toBeDisabled() }) // false positive
  await page.getByText('REFRESH', { exact: true}).click();
});

javascript playwright playwright-test

Answer 1

Answer №1

One way to guarantee that you catch the button in the correct state of being disabled is by intercepting the network request and mocking its response. This ensures a specific window where the button's status can be observed accurately. Mocking also helps link the assertion within the callback to the main promise chain in the test case, preventing the test from concluding before the assertion is executed.

Below is a concise and verifiable example:

import {expect, test} from "@playwright/test"; // ^1.39.0

const html = `<!DOCTYPE html>
<html>
<body>
<button>enter delete mode</button>
<button>REFRESH</button>
<script>
const [deleteModeBtn, refreshBtn] = document.querySelectorAll("button");
refreshBtn.addEventListener("click", e => {
  deleteModeBtn.setAttribute("disabled", true);
  fetch("https://jsonplaceholder.typicode.com/users")
    .finally(() => {
      deleteModeBtn.removeAttribute("disabled");
    });
});
</script>
</body>
</html>`;

test("button is disabled during the request", async ({page}) => {
  await page.setContent(html);
  const btn = page.getByRole("button", {name: "enter delete mode"});
  await page.route("*/**/users", async route => {
    await expect(btn).toBeDisabled();
    await route.fulfill({});
  });
  await expect(btn).toBeEnabled();
  await page.getByText("REFRESH", {exact: true}).click();
  await expect(btn).toBeEnabled();
});

To confirm that this test successfully verifies the button's disabled state during the network request, simply comment out

btn.setAttribute("disabled", true)

or

btn.removeAttribute("disabled")

, which will result in the failure of the test.

Answer 2

One way to guarantee that you catch the button in the correct state of being disabled is by intercepting the network request and mocking its response. This ensures a specific window where the button's status can be observed accurately. Mocking also helps link the assertion within the callback to the main promise chain in the test case, preventing the test from concluding before the assertion is executed.

Below is a concise and verifiable example:

import {expect, test} from "@playwright/test"; // ^1.39.0

const html = `<!DOCTYPE html>
<html>
<body>
<button>enter delete mode</button>
<button>REFRESH</button>
<script>
const [deleteModeBtn, refreshBtn] = document.querySelectorAll("button");
refreshBtn.addEventListener("click", e => {
  deleteModeBtn.setAttribute("disabled", true);
  fetch("https://jsonplaceholder.typicode.com/users")
    .finally(() => {
      deleteModeBtn.removeAttribute("disabled");
    });
});
</script>
</body>
</html>`;

test("button is disabled during the request", async ({page}) => {
  await page.setContent(html);
  const btn = page.getByRole("button", {name: "enter delete mode"});
  await page.route("*/**/users", async route => {
    await expect(btn).toBeDisabled();
    await route.fulfill({});
  });
  await expect(btn).toBeEnabled();
  await page.getByText("REFRESH", {exact: true}).click();
  await expect(btn).toBeEnabled();
});

To confirm that this test successfully verifies the button's disabled state during the network request, simply comment out

btn.setAttribute("disabled", true)

or

btn.removeAttribute("disabled")

, which will result in the failure of the test.

Ways to verify the element prior to the completion of the request?

Answer №1

Similar questions

Ways to fix the TypeError that occurs when attempting to convert undefined or null to an object by using Function.keys

Javascript animation functioning for a singular item within a list

Finding a solution for the network error encountered during the execution of XMLHttpRequest.send in the specified file path (...distfxcoreservermain.js:200

The React snackbar is mysteriously peeking out from behind the popup

Replacing text using regex results in whitespace

Iterate through the object received from the node promise and pass it to the subsequent .then method

What is the best way to find out if an array index is within a certain distance of another index?

Should we consider using extra url query parameters as a legitimate method to avoid caching or enforce the updating of css/js files?

Retrieve the elements by their IDs in an svg where the ID equals '@data[]'

Is it possible to identify users using an iPhone while they are utilizing "Private Browsing" mode?

What are the steps to integrating AngularJS with ES6?

Conceal the div element five seconds after the registration process is completed

To customize or not to customize?

What is the best way to assign a percentage width based on a variable in jQuery?

Browser and contexmenu intersecting halfway

What is the best way to assign the result of a promise to a variable?

Guide on accessing an array within a JSON object?

An effective way to prevent right-clicking on iframes across all websites

How can I create a box-shaped outline using Three.js?

Utilize jQueryUI sortable to serialize a list item within an unordered list