Cypress, Playwright, and Testing Library provide helpers such as cy.pause(), cy.debug(), page.pause(), and
screen.debug() for interactive debugging while developing a UI test. These helpers are useful during a local investigation, but they
should not remain in committed test code.
When a UI test debug helper is left in the suite:
// Cypress
it('saves a user', () => {
cy.get('button.save').debug().click(); // Noncompliant
cy.pause(); // Noncompliant
cy.contains('Saved').should('be.visible');
});
// Cypress
it('saves a user', () => {
cy.get('button.save').click();
cy.contains('Saved').should('be.visible');
});
// Playwright
test('saves a user', async ({ page }) => {
await page.getByRole('button', { name: 'Save' }).click();
await page.pause(); // Noncompliant
await expect(page.getByText('Saved')).toBeVisible();
});
// Playwright
test('saves a user', async ({ page }) => {
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Saved')).toBeVisible();
});
// Testing Library
import { render, screen } from '@testing-library/react';
test('saves a user', () => {
render(<UserForm />);
screen.debug(); // Noncompliant
});
// Testing Library
import { render, screen } from '@testing-library/react';
test('saves a user', () => {
render(<UserForm />);
});