Blog Posts on testing

Here's a list of all my blog posts with the testing tag

Testing Staging and Production environments in Playwright
When working with third party API's it is better to mock the API call rather than hit the API especially when they are API's that you do not control. Mocking the API allows you to finish developing your component or app and write the tests and then when the API is ready you can just swap out the mock for the real API call.
- playwright
- testing
Getting Started with Python and Playwright
For those new to Python here is a quick beginners guide on how to setup Python and Pytest and install Playwright. We then create an example test and run it in both headed and headless mode meaning with and without a browser window.
- playwright
- testing
API Mocking for your Playwright tests
When working with third party API's it is better to mock the API call rather than hit the API especially when they are API's that you do not control. Mocking the API allows you to finish developing your component or app and write the tests and then when the API is ready you can just swap out the mock for the real API call.
- playwright
- testing
Playwright's UI Mode - watch mode and time travel debugging
Are you looking for a more efficient way to execute and debug your end to end tests? Look no further than Playwright's UI Mode. In this guide, we'll explore the features of Playwright's UI Mode and show you how to take advantage of them for your test automation needs.
- playwright
- testing
A better global setup in Playwright reusing login with project dependencies
When you use global setup, you don't see a trace for the setup part of your tests and the setup doesn't appear in the HTML report. This can make debugging difficult. It's also not possible to use fixtures in global setup. In order to fix this issue, project dependencies were created.
- playwright
- testing
Setup a local dev server for your Playwright tests
Playwright comes with a webserver option in the config file which gives you the ability to launch a local dev server before running your tests. This is ideal for when writing your tests during development and when you don't have a staging or production url to test against.
- playwright
- testing
Testing Menus on Desktop and Mobile
We can write a simple test to make sure that when a user clicks on an item in the menu it takes them to the correct page. To test my website I use Playwright which I already have installed. Let's take a look at how to test the menu on desktop and mobile.
- playwright
- testing
How To Locate Elements in Playwright
In order to write end to end tests we need to first find elements on the webpage and then perform user actions on them. For example, find a link and click on it. But before we dive into how to use the test generator, first let's understand what a link element is and what exactly locators are.
- playwright
- testing
How to locate elements in Playwright
How can we locate a link click on it in our e2e tests. In this article we will learn how to locate elements in Playwright using the test generator to generate your tets based on user actions or pick a locator by clicking on an element
- testing
- playwright
Testing a Sites Color Mode with Playwright
My site has a color mode option to change from light theme to dark theme or sepia theme or use the system preference. So how can we write a test to make sure this all works?
- testing
- playwright
Debugging Tests in Playwright
Let's take a look at some of the ways you can debug your tests in Playwright should they fail. Playwright scripts work with existing debugging tools, like Node.js debuggers and browser developer tools. Playwright also introduces new debugging features for browser automation.
- testing
- playwright
Playwright Reports and Traces
Playwright will serve up a HTML report on your local server so you can easily walk through the steps of your test. You can also open a trace file which gives you even more powerful options of viewing, reporting, interacting and even debugging your tests.
- testing
- playwright
Getting Started with Playwright Testing
How can we get more developers to write tests? We can create better tools that makes testing easier. Let's take a look at Playwright and it's amazing features including codegen which writes your tests for you.
- testing
- playwright
Testing iframes with Playwright
Have you ever had to test something in an iframe on your page with end to end testing? Even testing the play button of an embedded video used to be difficult but then along came Playwright. Let's take a look at how Playwright can help you test iframes.
- testing
- playwright
Building and Testing a Counter Component
We want to build and test a counter component built with React and TypeScript. So where do we start? Which components do we need to build to create this component and what do we test?
- react
- testing
Building and Testing a Select Component
Building a Select component with a Composition to see the component render in isolation as well as Tests using React Testing Library to test the select works on change and shows a new value.
- react
- testing
Testing a Button Component
Testing a button component with React Testing Library. What to test and how to test your button component when building multiple compositions of the button.
- react
- testing
Setting up cypress
Let's take a look at how you setup Cypress in your Nuxt.js project, setup a github action for continuous integration so that Netlify will run the tests every time your application is building.
- nuxt
- testing

Testing Staging and Production environments in Playwright

Getting Started with Python and Playwright

API Mocking for your Playwright tests

Playwright's UI Mode - watch mode and time travel debugging

A better global setup in Playwright reusing login with project dependencies

Setup a local dev server for your Playwright tests

Testing Menus on Desktop and Mobile

How To Locate Elements in Playwright

How to locate elements in Playwright

Testing a Sites Color Mode with Playwright

Debugging Tests in Playwright

Playwright Reports and Traces

Getting Started with Playwright Testing

Testing iframes with Playwright

Building and Testing a Counter Component

Building and Testing a Select Component

Testing a Button Component

Setting up cypress