Protractor, the Angular end-to-end testing tool, is officially being sunset. With development ending at the end of 2022, we need to assess what our options are for further investing in Protractor as the tool that maintains our end-to-end testing suite. Here, we’ll take a look what our top Protractor alternatives are moving forward and how we can stay confident in our tests.
Why is Protractor being deprecated?
The Protractor GitHub issue that announces the deprecation plans goes into a lot of detail about why the decision was made and how it was not made lightly, but the theme of the decision is that the JavaScript ecosystem was in a completely different state back in 2013 when Protractor was created.
WebDriver APIs weren’t standard and this was before popular end-to-end tools like Cypress and Playwright existed.
Fast forward to 2021, where developers have a wide variety of options for their end-to-end tests, giving teams a way to make sure their needs are met for their individual use cases.
The Protractor team inside Google ultimately made a decision weighing the cost of updating Protractor and what that migration effort would look like for users, where it made more sense to help guide those users to other solutions.
What are our options moving forward for Protractor alternatives?
Luckily there are a lot of great testing tools with ample documentation that should make the transition smooth.
To get a sense of what tools we can use, we’ll look at some of the popular options we can use along with a basic example of a test with that particular tool.
We’ll start with this example of a test inside of Protractor:
Inside of this test, we’re loading up The Kitchen’s Select ingredient where we select an item (garlic) from that dropdown and make sure it successfully has that value.
So now, let’s dive into what other frameworks we have available as alternatives to Protractor.
Cypress
Cypress is a tool that has become very popular in the JavaScript world. Cypress has an API much like Playwright and Puppeteer which we’ll see shortly, but it goes an extra step to try to make the experience of writing and running tests better.
For one, unlike the others, Cypress ships with an assertion library out of the box (Chai). While it’s a small thing, it’s one less piece to configure.
Cypress additionally has a testing UI that pops up when running tests locally, giving flexibility to run only the tests you want and see the results along with debugging options in realtime.
The first thing we’ll notice is the code is short and concise.
Here we visit the page, which includes both launching a browser and navigating to the page. Then, in one line, we can get our Select dropdown, select our option, and check that it has the value we need.
While some of the other tools might have more flexibility, the Cypress API provides a slick way to easily automate your browser interactions.
Playwright
Playwright is an end-to-end testing tool from the team at Microsoft. It allows automation of modern web apps across browsers like Chrome, Firefox, and Webkit.
Playwright is actually quite similar to Puppeteer, which we’ll cover next, where some of the same core members who built and maintained Puppeteer actually moved to Microsoft from Google to create Playwright.
Where Puppeteer was a Chromium-based tool only, Playwright steps in and provides support for all modern browsers including Google Chrome and Microsoft Edge by using Chromium, Apple Safari by using WebKit, and Mozilla Firefox.
Using Playwright, we can choose what browser we’d like to run our tests on (or multiple browsers) and issue some straightforward commands for Playwright to follow.
In the above, we’re using Chromium, where we’re able to launch a new browser instance along with a new page, navigate to the Select ingredient, select our option, and check it’s value.
Note, similar to others on this list, you’ll need an additional library like Jest to write assertions.
Tip: if you want to learn more about Playwright, check out our article Playing with Playwright!
Puppeteer
Puppeteer is a similar tool to Playwright brought to you by the Google team. It followed what was an initial release of headless Chrome, where with Puppeteer, you can automate tasks right inside of the Chrome browser using native Chrome features. This helps to prevent flakiness some other frameworks tend to have.
As we dive into the code, you’ll notice that Puppeteer looks really similar to the Playwright example, minus a few small syntax changes. This is due to the history we talked about above, where Playwright was built by the team who used to work on Puppeteer.
In the above, just like Playwright, we launch our browser and navigate to our page, select an option from the dropdown, and make sure it’s what we expect it to be.
While production support is only available for Chrome, other browser support appears to be on its way, starting with Firefox.
Similar to Playwright, we need a library like Jest to handle our assertions.
Selenium WebDriver
Selenium WebDriver is a tool that’s been around for quite a long time, long before the newer Playwright, Puppeteer, and Cypress.
Selenium uses the WebDriver protocol to interface with the browser which uses a server to interact with the browser like ChromeDriver or the geckodriver for Firefox.
In our test, we need to create a new driver where we configure it as a new instance of Chrome. with our driver, we can navigate to our page just like any other tool, where we then use the API to find our elements, interact with our elements, and make sure that it’s working as expected.
We can also see in the above that we pull in assert which we use to write the assertion and verify it’s working as expected.
TestCafe
TestCafe is a framework that touts its ability to run tests out-of-the-box without any need for WebDriver. It also has the capability of running on all modern browsers.
While TestCafe is still based off of JavaScript, its syntax looks a bit different compared to the other ones we’re reviewing.
In the above, we first define a fixture which will be the page that we want to visit in our test. We next define our selectors before we even get to the test, which in this instance, we want to define our dropdown as well as the option that element which will be a child of the dropdown.
With our selections, we click our way through, selecting our element by its label instead of its value, then make sure its working as expected.
We can see that we get the assertion here out of the box without needing another dependency.
Webdriver.io
Webdrverio.io is a tool that can run on both the WebDriver and Chrome DevTools protocol to automate browser testing. As standards have changed, their support of running both gives developers the flexibility of using whichever option works for their use case.
It’s also capable of native mobile testing through an emulator, simulator, or on device, as well as native desktop applications written with tools like Electron.js.
While Webdriver.io primarily runs on WebDriver, you’ll notice the syntax is a bit more similar to some of the newer frameworks we’ve discussed.
Here, we’re loading up a page by URL just like any of our other tests and similar to Cypress, we’re able to do it in one line. Then, we find our Select element using a jQuery-like syntax, where we can both select our value and get the value, to verify it’s correct.
In this example, we’re pulling in Jasmine as our way to add assertions.
End-to-End Visual Testing with Applitools
The good news, is whatever testing tool you choose as your Protractor alternative, Applitools already has you covered.
Applitools supports a wide variety of SDKs that interface directly with your testing tool of choice, making integration super easy.
To find examples of using Applitools with all of the tools above along with many others, check out the Applitools tutorials page.
