DEV Community

0 seconds of 3 hours, 36 minutes, 35 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
3:36:35
 
Hasan
Hasan

Posted on

2

Learn Playwright Automation | E2E Test | Typescript | Auth, Maps, CRUD, GitHub Actions

In this tutorial, I’ll walk you through how I added Playwright test code to a Game Review App! This app includes key features like authentication, CRUD operations, and map rendering, and I’ll guide you step-by-step in implementing Playwright tests for all these functionalities.

Breakdown:

Topic: 00:00:10
Video Overview: 00:01:52
Why Playwright: 00:02:45
Project Overview: 00:05:10
Playwright Installation: 00:08:23
Playwright Report: 00:11:40
Playwright Configuration: 00:13:33
Basic Testing and Playwright Tools: 00:16:38
Playwright Ui Mode: 00:18:01
Folder Structure: 00:24:46
Setup Git Action: 00:28:25
Start Writing Test Code: 00:42:34
Refactor Test Code with Fixtures and Custom Fixture: 02:42:45
Test Generator: 03:25:25
Enter fullscreen mode Exit fullscreen mode

Here’s what you’ll learn throughout this tutorial:

  • How to set up Playwright in an existing project 🛠️
  • How to configure Playwright with environment variables ⚙️🔑
  • Majorly used essential Playwright methods and how to use them effectively 📜✨
  • Working with fixtures, mocking APIs, and handling API responses in Playwright 🔄💻🌐
  • How to run all Playwright tests with a single command ▶️🚀
  • Integrating Playwright tests into GitHub Actions to automate test execution on every push 🤖🔄
  • Finally, using the Playwright Test Generator to create automated test code effortlessly ⚡📋

By the end of this video, you’ll feel confident about adding Playwright testing to your applications and setting up continuous integration with GitHub Actions.

Let’s dive in! 🚀

Watch the full video on YouTube: https://youtu.be/_aMElkcTepM

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay