← Back to Discord Forum

NextJS - How to avoid flaky cases while testing modal?

Hi, I have a NextJS application and I am using Playwright for integration testing. There is a scenario to test that modal pops up when user types "/" in the editor. I added test ID to the modal and tried to wait it to be visible, but it sometimes get timeout, especially more often on Github runners. What is the best practices to test modal popups with Playwright? Thanks in advance.

This thread is trying to answer question "What is the best practices to test modal popups with Playwright in a NextJS application?"

0 replies


Testing Modal Popups with Playwright

When testing modal popups with Playwright, it's best to avoid testing third-party dependencies directly. Instead, use the Playwright Network API to mock responses. This ensures consistent test results and avoids time-consuming tests against external sites.

import { test } from '@playwright/test';

test('mock network response', async ({ page }) => {
  await page.route('https://ray.run/api/popups', route => route.fulfill({
    status: 200,
    body: JSON.stringify({ success: true }),
  await page.goto('https://ray.run');

If you're working with a database, test against a staging environment where the data remains constant. This helps maintain consistency in your tests.

For visual regression tests, ensure that the operating system and browser versions remain consistent across different test environments. This eliminates variations caused by differences in rendering.

Playwright's VS Code extension and trace viewer tool can greatly assist in writing tests. The extension offers code completion, debugging support, and automatic locator generation. The trace viewer tool allows you to view detailed traces of your tests.

import { test, expect } from '@playwright/test';

test('trace viewer', async ({ page }) => {
  await page.goto('https://ray.run');
  const popup = await page.waitForSelector('.popup');

Playwright makes it easy to define multiple projects within its configuration file (playwright.config.ts) for cross-browser testing. Each project represents a specific browser or device configuration.

// playwright.config.ts
module.exports = {
  projects: [
      name: 'Chromium',
      use: { browserName: 'chromium' },
      name: 'Firefox',
      use: { browserName: 'firefox' },
      name: 'WebKit',
      use: { browserName: 'webkit' },

Finally, keep your Playwright dependency up to date to ensure compatibility with the latest browser versions. Check the release notes for each update to understand what changes have been made.

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.