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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay