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

JavaScript is unable to identify one of the JSON values

Encountering difficulty retrieving the value of a hidden input with jQuery's find method

Substitute this.bindMethod for function component

NavigAuth - NativeScript Vue's Innovative Authentication-driven Navigation

Tips for targeting an element for focus following a re-render in ReactJS

Clicking will cause my background content to blur

Passing multiple functions to child components in ReactJS as a single prop

Is there a way to determine if a browser's Storage object is localStorage or sessionStorage in order to effectively handle static and dynamic secret keys within a client?

The PHP sorted array loses its order when encoded into JSON and then sorted in JavaScript

Every time I hover, my jQuery code keeps repeating the hover effect

Ways to control the number of boxes that are checked

When attempting to push `content[i]` into an array in AngularJS, it is flagged

Include the button beneath the Rating section using JQuery or AJAX

Tips for dynamically styling a Styled Component with all the CSS housed in an external file

Having trouble configuring the sticky-footer correctly

Audio suddenly no longer working after transferring project to React

Utilizing jQuery AJAX to efficiently handle branching based on the result received

Using Javascript to dynamically add variables to a form submission process

Error: An attempt to make changes to a database that does not permit mutations has resulted in an InvalidStateError

Guide to setting up a custom js file in Laravel admin template