How to Create Playwright Scripts for Website Monitoring with Chrome, ChatGPT & Sematext

Let’s say you want to make sure your website works as expected. You do not want to check if it just loads. You also want to check if important buttons or features are there and working. Oh, and you don’t want to just do it once. You want to keep an eye on this pretty much all the time. And, of course, you don’t want to keep checking manually if anything broke – you want to be notified, alerted when (not if) things break. You can do this by creating a Browser Monitor. Let me show you how. A browser monitor runs a Playwright script that opens your site and interacts with it like a real user.

What Is a Playwright Script and Why Use It for Website Monitoring?

A Playwright script is a piece of code that tells a browser what to do, such as a user clicking buttons, filling out and submitting forms, or checking if web page elements are visible. It’s like an automated version of someone using your website.

Playwright is a popular open-source framework maintained by Microsoft. It supports all modern browsers (Chrome, Firefox, Safari) and is great for end-to-end testing and monitoring real user flows.

Using Playwright for website monitoring means you’re not just checking if a page loads, you’re making sure real functionality works. For example:

• Is the “Sign In” button still there and clickable?
• Can users log in successfully?
• Does the checkout process work?

Sematext Synthetics helps you do this by letting you write Playwright scripts to simulate user journeys and then running them for you at your desired frequency and alerting you when anything stops working.

And the best part? You don’t have to write these scripts yourself. Chrome helps you find the right elements, ChatGPT writes the code, and Sematext runs the code for you.

This article shows how to:

• Use Chrome to find the element you want to test
• Ask ChatGPT to write Playwright code using that element to simulate the user journey
• Create a Browser Monitor in Sematext Synthetics to run that script at regular intervals

Importantly: You do not need to be a developer or write code from scratch.

Step 1: Use Chrome DevTools to Get a CSS Selector

First, open your website in Google Chrome.
Let’s say you want to check the “Sign in” button.

1. Right-click on the “Sign in” button
2. Click “Inspect”
3. Chrome will open DevTools and highlight the button’s HTML
4. Right-click that HTML and select “Copy” then “Copy selector”

Now you have the CSS selector for that element. It may look like this:

#app > div.vbox.PublicRoot_root_VpsHY > div > div.LoginPage_login_LM9cM > div > div.LoginForm_login_f8Afg > form > fieldset > button

This selector helps you tell Playwright exactly what element you want to interact with.

Here is the video that shows exactly these steps. I used Sematext’s sign-in page to demonstrate what you want to do:

Step 2: Use ChatGPT to Generate a Playwright Script

Go to ChatGPT and prompt it with something like:

Write a Playwright script with Sematext Synthetics Playwright scripting style that goes to https://example.com and clicks on the element with selector [enter the CSS selector that you’ve captured from Chrome above]

ChatGPT will give you a script like this:

// This script loads the webpage and interacts with it using Playwright.
// It navigates to the page and clicks the button defined by the given selector.

async function testPage(page) {
  // Go to the specified URL
  await page.goto("https://example.com");

  // Optional: wait for the button to be visible to ensure it's interactable
  await page.waitForSelector('#app > div.vbox.PublicRoot_root_VpsHY > div > div.LoginPage_login_LM9cM > div > div.LoginForm_login_f8Afg > form > fieldset > button', {
    state: 'visible',
    timeout: 10000
  });

  // Click the target button
  await page.click('#app > div.vbox.PublicRoot_root_VpsHY > div > div.LoginPage_login_LM9cM > div > div.LoginForm_login_f8Afg > form > fieldset > button');
}

export default testPage;

You can also ask the script to check if the button is visible or if clicking it navigates to the correct page. For example, in the example above, we tested whether the “Sign In” button is clickable. But you can go a step further and ask ChatGPT to write a Playwright script that simulates the full sign-in process by entering a username and password. Here’s a prompt you can copy and use:

Write a Playwright script with Sematext Synthetics Playwright scripting style that goes to https://example.com and clicks on the element with selector [enter the CSS selector that you’ve captured from Chrome above]. Simulate the full sign-in process by entering a username and password.

To prevent passwords from being visible in plain text, if you plan to simulate a user journey involving login credentials like the one above, you can use Sensitive Data Protection. This ensures your credentials are securely stored. Sematext uses AWS Secrets Manager for that, so everything stays safe.

Step 3: Run the Script Automatically with Sematext Synthetics

Once you have the script ready, you can run it automatically using Sematext Synthetics.

1. Sign up at Sematext if you do not have an account
2. Create a new Synthetics App
3. Click Add Monitor and select Browser Monitor
4. Choose how often you want it to run and from which locations
5. In the Configure URL/Script tab paste your Playwright script
6. Save the monitor

Sematext will now run the script on a regular schedule and alert you if something goes wrong. For example, if the button is missing, the click action fails, or the entire sign-in process does not work as expected.

For each monitor run, you will receive key performance metrics such as response time, page load time, time to first byte, first paint, first contentful paint (FCP), largest contentful paint (LCP), cumulative layout shift (CLS), as well as the total number of requests and data transferred.

You will also see a list of the top resources sorted by load time, including details like status codes, compression, caching, and request timing.

Benefits of Browser Monitoring with Sematext

Using this method, you can check if real actions on your site work. This is more useful than just checking if the site loads. You will know right away if something important is broken. You do not need to write code yourself. Chrome helps you find the element. ChatGPT writes the script. Sematext runs it for you.

Final Notes

Here is a quick summary of how to test your website in a smart way:

1. Use Chrome to find what on a page or pages you want to check
2. Use ChatGPT to turn that into a Playwright script
3. Use Sematext to run this script regularly and send alerts if something fails

This helps you catch problems in production quickly, so you can fix them before they impact more users.

If you also want to catch issues before they reach production, Sematext offers CI/CD monitors. These can run the same scripts during your deployment pipeline to help catch regressions early through shift-left testing. You can learn more in our guide for catching regressions with GitHub Actions and CI/CD monitors.