How can I use Playwright to test if my CSS files are loading with a 200 response?


Sure, you can use Playwright's APIs to monitor and modify network traffic, including HTTP requests. This allows you to track the network requests made by a page and verify their responses.

Here's how you can do it:

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

test('CSS file loads with 200 response', async ({ page }) => {
  // Block any css requests for each test in this file.
  await page.route(/\.css$/, route => route.abort());

  await page.goto('https://ray.run');

  // Assert that the CSS file loaded successfully
  const cssResponse = await page.waitForResponse(response => response.url().endsWith('.css'));

In this code, page.route() is used to intercept any request with a URL ending in ".css" and abort it. Then, we navigate to our target webpage using page.goto(). After that, we use page.waitForResponse() to wait for the response of the CSS file request. Finally, we assert that the status code of the response is equal to 200 using expect().

This way, you can create detailed tests that ensure your CSS files are loading correctly with a successful HTTP status code (200).


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Discord Threads

Related Questions

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.