Challenge: Playwright

Introduction

Purpose: This challenge is part of your application process at SocyList. The focus is not only on task completion but also on how well you communicate your process and planning. So before you start, read all the steps carefully and answer the questions below for yourself:-

Pre-task Questions:

1. What is the (end) goal?
2. What do I already understand, and what needs further information?
>>>Communicate your schedule before you actually start!

Required Software

List of Tools: Below are the tools needed to complete this challenge, along with links for official installation guides:

1. Node.js: Required for running Playwright and managing JavaScript projects.
- Node.js Installation Guide
2. Playwright: A framework for testing web applications with support for multiple browsers.
- Playwright Installation Guide

Instructions

Setup Steps

1. Start a new Playwright project using TypeScript: Follow the Playwright setup instructions for guidance on initializing your project.

Required Steps

2. Identify a Website/Application:
1. Choose a website or web application with multiple interactive components.
2. Write 3 simple user scenarios, each consisting of at least 3 steps.
3. Create Playwright Tests for Each Scenario:
- For each user scenario from Step 1, create a corresponding Playwright test.
4. Include Screenshots:
- Ensure that a screenshot is taken at the end of each test, and that this is included in the test report.

Optional Steps

5. Debugging with Playwright Inspector:
- Use the Playwright Inspector to debug your tests step-by-step.
- Provide a screenshot demonstrating successful debugging.
- Reference: Playwright Inspector Documentation
6. Intentional Test Failure:
- Make one of the tests intentionally fail.
- Use the Trace Viewer to analyze where the failure occurred.
- Provide a screenshot showing the Trace Viewer in action.
- Reference: Trace Viewer Documentation

Submission Steps

-> Submit via WeTransfer: Deliver the complete project as a downloadable file on WeTransfer.
-> Include all required files: like code, tests, screenshots, & any other relevant documentation.

Good luck!