In a previous post (please read it if you haven’t read it) I have already mentioned the basics that will allow you to get started in test automation with code:

  • Programming basics
  • Automated testing concepts
  • A programming language
  • Test automation basics
  • An automation framework
  • Version control tools

And today I bring you the quickest route you can take using Playwright as your automation framework and Javascript/Typescript as your programming language.

 

¿Why Playwright and TypeScript?

 

Playwright

  • Cross-platform and Cross-browser: Playwright is an automation framework that allows you to run tests on different browsers (Chromium, Firefox, WebKit) and platforms. I’ve used it for API, UI, and command-line testing so far.
  • Easy to set up and use: It allows you to write robust tests with less code.
  • Native integration with CI/CD: With Playwright, integrating your tests into continuous integration pipelines is straightforward, which speeds up processes.
  • Selector strategy: super intuitive and easy to use.
  • Recorder: It allows you to record tests in the browser and generates the code based on all the steps we follow when recording.

 

TypeScript

  • JavaScript with superpowers: TypeScript is a superset of JavaScript that adds static typing, which helps detect errors at compile time.
  • Improves maintainability: Working with more predictable and self-documenting code makes it easier for teams to collaborate and the project to evolve.
  • Popular in the modern ecosystem: Many modern frameworks and tools adopt it, so learning TypeScript opens the door to other projects in the future (with frameworks like Cypress, WebdriverIO, and Appium).

Together, Playwright and TypeScript enable you to write cleaner, more robust, and more scalable tests, which is especially useful for those coming from a manual testing background who want to get faster results in automation.
 

Getting Started

The first step, with no doubts, is to familiarize ourselves with the basics of test automation.

Let’s start with User Interface tests. Our basis would be: test logic, data and configurations, design patterns such as Page Object Model and Screenplay, assertions, locators, locator strategies, retries and timeouts, test parameterization, Mocks/Stubs, logs, reports, execution and orchestration, exception handling and maintainability.

You can support yourself on the web Test Automation University to explore concepts like Setting a Foundation for Successful Test Automation and Web Element Locator Strategies.

Then, I highly recommend taking a Playwright course that covers the basics of Javascript/Typescript for Testing. We don’t need to know everything about a programming language to start contributing to software projects dedicated to testing. I clarify that an automated test suite is a software project itself and, so, we must apply good development practices, but we don’t need to be experts in this language (in this case, Javascript/Typescript).

What we do really need to go further in is the knowledge of the test automation framework, in this case Playwright. Understanding everything we can achieve with the framework, knowing the configuration, installation, how to parameterize the tests, how to run and filter them, how to work with different data sources, timeouts, retries, visual testing, reports and the different integrations available, will allow us to get the most out of the framework.

So your main focus is to learn the basics of the programming language and a lot about the automation framework.

I recommend the course The Free Range Tester (in spanish), which has a chapter with everything you need in Javascript/Typescript to automate and everything you need in Playwright. In English there are very good resources in Test Automation University: start with the Introduction to Javascript and then, follow the Playwright Path.
 

Practice makes perfect

You won’t achieve very much if you don’t practice what you’re learning. Here is a list of websites you can use to practice test automation:

  • PHP Travels a website where you can book flights, hotels, tours and cars.
  • Orange HRM a complete human resources management system.
  • Parabank: online banking system.
  • Juice Shop: an online store. You can install this project locally and apply all the changes you want. It was created for the purpose of running security tests, but it is also useful for user interface testing.
  • XYZ Bank: a banking app, much simpler than Parabank. This is probably the easiest on the list to start your first automation suite.
  • Automation Exercise: a shopping cart that even designed the tests (you just have to automate them).

Start with the one that seems easiest to you (in my opinion XYZ Bank), design the cases and automate them.
 

Lean on Artificial Intelligence

Below I share with you a couple of videos in which you can see me designing test cases and automating them with the help of ChatGPT and Perplexity (In Spanish).

Creando una suite de Automatización con ChatGPT y Playwright.

Creando una suite de Automatización con Perplexity y Playwright.

These AI tools not only help you automate, but they also explain to you step by step (line by line of code) what it is doing (basically its logic for creating the code). It is not perfect, but our testing logic comes into play and we can ask it for improvements, based on what we want to achieve with a particular test (we decide if its approach is relevant or not, if a locator element can/should be improved, if the assertions are the best we could be using).

Take advantage of the help of this tool while you are learning to automate.