Trailblazing Through Code: Hitching Up Cypress & Playwright in the Installation Frontier!
- ACT 1: EXPOSITION
- ACT 2: CONFRONTATION
- ACT3: RESOLUTION
ACT 1: EXPOSITION
In the ever-evolving realm of web development, testing frameworks are key to crafting seamless user experiences. Among the frontrunner sharpshooters, Cypress and Playwright have garnered attention for their precision and speed.
I have been working with Cypress for a while now, both at work and on my personal projects, including some plugins and a blog. Exploring Playwright in depth to broaden my automation experience has been on my bucket list for too long. ⌛
So, I have decided as a New Year's resolution to learn Playwright in detail and implement some personal projects with it, and why not share this journey with the rest of the QA community by starting a new blog series called "Drama Probationis: Cypress et Playwright, Quis Ludos Spectat?" (in plain English... "The Test Drama: Cypress and Playwright, Who Steals the Show?")
This article is the first in the series and presents a detailed examination of the installation processes for these two contenders, outlining the distinct steps involved in setting up each tool while maintaining an objective perspective.
Navigating the initial setup phase often sets the tone for a developer's initial perception of a tool, impacting both agility and productivity. This objective comparison, or at least an earnest attempt to remain neutral, maps out the installation journeys for Cypress and Playwright.
By providing a clear and factual representation of each step involved, developers are equipped with the knowledge to discern the ease or complexity inherent in the setup process. Through this lens, the article offers valuable insights, ensuring developers can make informed decisions about which framework aligns best with their needs and projects. I will be sharing my thoughts along with this exercise.
ACT 2: CONFRONTATION
For our exercise, we will create and configure a fully operational test framework from scratch for a brand new project using Cypress and Playwright (or Playwright and Cypress if you prefer). 😉
Our test project will utilize TypeScript as the programming tool.
As a prerequisite, you will need to have Node.js (at least version 18+) and Visual Studio Code installed on your machine as the selected IDE.
CYPRESS.IO
This gunslinger has demonstrated in many former rodeos that it has enough gunpowder in its arsenal to take down a few old veterans.
Let's dig into its installation process.
According to the Cypress website install page, you get Cypress in your project via NPM Install via the terminal, or using the Direct Download.
But there is also a third option and that is using cye2e open-source Cypress plugin by Ademola Bhadmus.
We will explore all these three options.
VIA NPM INSTALL (terminal)
These are the different actions we need to perform in order to install and configure a brand new Cypress project for TypeScript using NPM Install:
1. Create the Node.js package
1.1. Init the project package
Open a terminal, and type:
npm init
When prompted, simply hit the key [enter] to create the Node.js package with all the default options. You can provide more information if desired, but let's keep it as simple as possible.
Result
- Created
package.jsonfile in the project's root folder.
2. Install Cypress in the Project
2.1. Install Cypress as devDependencies
In the terminal, type:
npm install --save-dev cypress
Results:
- Installed cypress in
package.json. - Installed all the modules in
node_modules, and createdpackage-lock.jsonfile.
3. Set up Default Configuration and Create Test Examples
3.1. Open Cypress runner
In the terminal, type:
npx cypress open
3.2 Select E2E Testing Option and Continue to Create the Cypress Configuration Files
3.3 Select a browser (Electron is the default) and Start E2E Testing
3.4 Select Scaffold example specs and Ok, I got it! to Create the Examples
Results:
- Created file
cypress.config.js. - Created
cypressfolder containing:-
supportfolder withcommand.jsande2e.jsfiles. -
fixturesfolder with a sample. -
e2efolder with 20 sample tests (this could be useful when you are learning earlier, but after a while they kind of get in the way).
-
4. Support of Typescript
4.1. Install Typescript as devDependencies
In terminal, type:
npm install typescript --save-dev
4.2 Configure Typescript
Create the file tsconfig.json inside the cypress folder with the following content:
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress", "node"]
},
"include": ["**/*.ts"]
}
Result:
- Typescript installed and configured in your Cypress project.
Note from Cypress Documentation: "You may have to restart your IDE's TypeScript server if the setup above does not appear to work."
At this point, I would like to pause and consider what else we might need in our project... 🤔
5. Configure GitHub Setup
Your Cypress project will most likely be hosted on GitHub, and you'd probably want to integrate it with GitHub Actions to run your tests in the CI/CD pipeline whenever there are any changes, ensuring everything remains in good shape. Therefore, we'll need to create a .gitignore file and a .yml file in the project.
5.1. Create .gitignore file in the project's root folder
Include in the file those Cypress and npm folders that you do not want to have in your GitHub project:
# Cypress generated files
/cypress/videos/
/cypress/screenshots/
# Node.js dependencies
/node_modules/
5.2. Create a configuration .yml file for GitHub Actions to run tests when changes occur in GitHub.
Create a folder .github\workflows in the project's root folder. Inside this folder, place a file called main.yml.
The following code is the bare minimum you need to integrate GitHub Actions into the CI/CD pipeline:
name: Cypress Tests
on: push
jobs:
cypress-run:
runs-on: ubuntu-22.04
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Cypress run
uses: cypress-io/github-action@v6
Result:
- Project integrated in a CI/CD pipeline
After completing these five steps, we have configured a brand new Cypress framework for our Typescript test project. 🙌
VIA DIRECT DOWNLOAD FROM WEBSITE
It seems there is a way to install Cypress directly from their installation page.
I have never tried this method, and to be honest, I didn't even know it existed until a few weeks ago. 😲
However, I would not recommend using this method since the official product documentation recommends using the npm installation as a better practice due to its versatility. ⛔
VIA cye2e PLUGIN BY ADEMOLA BHADMUS
One of the Cypress.io ambassadors, Ademola Bhadmus', recently created an excellent Cypress plugin called cye2e. This plugin allows you to easily create a Cypress template project.
This is what you need to do to use it:
1. Install cye2e plugin globally on your machine
Execute the following command in a shell:
npm install -g cye2e
2. Create and Configure the Cypress Project
You can create and configure a Cypress project with very little effort by opening a shell in the folder where you want to host your project and simply typing the command cye2e.
When prompted, we will select the following options:
- Typescript as language
- Accept the default baseUrl suggested
- No to setup BDD
- No to set up a reporter
- Yes to setup a pipeline
-
Yes to file
.gitignore - Yes to run npm install after creating the files
- Github as version control
Results:
The cye2e command, with the selected options, will set up a Cypress project similar to the one created via npm install, as described in a previous section of this article. This includes:
- Created the Node.js project:
package.json - Installed and configured Cypress:
cypress.config.js,supportfolder with the filescommand.jsande2e.js,fixturefolder with a sample, ande2efolder with a sample - Installed modules:
node_modules, andpackage-lock.jsonfile - Installed and configured Typescript:
tsconfig.json - Configured the
.gitignorefile and CI/CD pipeline.ymlfile
Note: Do not try to execute the
cye2ecommand in the VSCode terminal, as it will result in an error such as:
But this plugin goes the extra mile, supporting configuration options that allow you to also set up:
- BDD
- The bundler
- A reporter
Pretty cool, isn't it? ☀️🕶️
PLAYWRIGHT (by Microsoft)
Let's turn our attention to the other contender in this duel: Playwright, the rising star on the dusty trails of web automation.
According to their documentation, Playwright can be installed and configured for a project in one of two ways: via NPM Install or using the Playwright VSCode Extension.
VIA NPM INSTALL (terminal)
1. Set Up the Full Test Framework for the Project with playwright@latest
1.1. Initialize New Playwright Project
Open a terminal and type:
npm init playwright@latest
When prompted, select the following options:
- Use Typescript
- Place end-to-end tests in
testfolder - Add GitHub Actions to the workflow
- Install Playwright browsers
Results
- Created
package.json. - Installed Playwright in
package.json. - Installed all the modules in
node_modules, and createdpackage-lock.json. - Created
testandtest-examplesfolders with one example each. - Typescript installed and configured (
playwright.config.js). - Project integrated in a CI/CD pipeline:
- Added
.gitignoreto exclude Playwright folders in a commit. - Added GitHub workflow (
playwlright.yml).
- Added
- Installed the browsers: Chromium, Firefox, and WebKit:
- On Windows in:
%USERPROFILE%\AppData\Local\ms-playwright - On macOS in:
~/Library/Caches/ms-playwright - On Linux in:
~/.cache/ms-playwright
- On Windows in:
And that's it! You're done installing at this point. Sweet, isn't it? 🍬
VIA VISUAL STUDIO CODE EXTENSION
Playwright has a VSCode extension that can assist you when creating a brand new Playwright test framework for your project.
1. Install the Official MS Playwright extension for VSC
Go to the VSC Marketplace, select, and install the extension called Playwright Test for VSCode from Microsoft.
2. Initialize New Playwright Project From VSCode Command Palette...
2.1 Command Palette
Go to View > Command Palette...
2.2 Type Install Playwright
In the Command Palette type Install Playwright.
2.3 Select All Browsers and Option Add GitHub Actions Workflow
This will create a Typescript project by default and will install the browsers Chromium, Firefox and WebKit.
Results
Your Playwright project will be fully installed and configured.
Neat indeed!
ACT3: RESOLUTION
Okay, we made it! We've installed both test frameworks in all possible ways, and here is where I share my impressions with you, my QA fellows.
Ease
Although comparisons often lead to discontent, at this point, it seems pretty obvious that installing the Playwright framework from scratch, especially for TypeScript, is much more straightforward, fast, and simple compared to Cypress.
As I perceive it, for a brand new project, Playwright subtly encourages you to use a GitHub repository and link your test project to a CI/CD pipeline. It does this by automatically facilitating the creation of .gitignore and .yml actions files.
This approach by Playwright is particularly beneficial for someone new to the testing framework.
On the other hand, setting up a new project in Cypress from the start seems more cumbersome—equally for both new and experienced QA engineers, but especially so for beginners.
cye2e Cypress Plugin
We have seen that Ademola Bhadmus' Cypress plugin cye2e, functions in a manner similar to the installation and configuration of Playwright via a single command line in the terminal. It sets up everything needed for a brand new Cypress project, along with a few additional features not covered by the Playwright installation.
I really like this plugin! I truly do! 🤩
Cypress should consider integrating good plugins into the product or at least addressing the gaps currently filled by many community-developed plugins or other products. Relying less on the Cypress community would be beneficial since these plugins are maintained by independent contributors, and for several and justified reasons, many of them have ceased being updated.
Final Takes
However, on a personal note, I infrequently build Cypress projects from scratch unless I'm crafting a new plugin.
For my work and other personal projects, I already have a pre-built Cypress template with all the configurations and my favorite utility plugins integrated. So, for a seasoned QA engineer working on enterprise projects, this more complex build-from-scratch process wouldn't be an issue, aside from the first time you create your template.
If you're feeling adventurous and ready to step outside your comfort zone, don't hesitate to try creating your first Cypress plugin—I’ve got you covered! Check out my article, "The Quirky Guide to Crafting and Publishing Your Cypress npm Plugin". It's packed with everything you need to know!
Additionally, I no longer use reporters like Mocha-some, as I now rely more on Cypress Cloud. However, for those who don't use Cypress Cloud, these reporters might still be sensible and helpful, and Playwright includes good reporters out of the box. In Cypress, you will need to explicitly install the corresponding plugin for the desired reporter.
I'm not here to sway you into picking sides in the great Cypress vs. Playwright debate. Instead, think of me as your testing tour guide, sharing my own experiences with both tools and highlighting the unique twists and turns each framework takes to achieve the task at hand. After all, each contender has its own quirks and charm, and I'm simply here to shed some light on their individual journeys!
Cheers!
Don't forget to follow me, leave a comment, or leave a reaction if you found this article useful or insightful. ❤️ 🦄 🤯 🙌 🔥
You can now also find me on my new YouTube channel: https://www.youtube.com/@SebastianClavijoSuero
Top comments (0)