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 image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

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

Okay