Top 5 Alternatives to Protractor

History of Protractor

Protractor has been one of the most popular JavaScript end-to-end automation testing frameworks in existence. Built with NodeJS, the initial version of Protractor was released in 2013. Protractor uses JavaScript Selenium WebDriver bindings. Protractor started out as a prototype of a testing framework. But as AngularJS evolved, Protractor also quickly became popular due to unique features like being open-source, being easy to set up, and out of the box support for all major browsers. 

Until its deprecation, Protractor supported automation of both Angular and non-Angular-based applications. Having been around for almost 9 years, the Protractor framework is still used by millions of users worldwide.

Angular Team Announces End of Protractor Development

According to the Protractor’s announcement on Github the Angular team will stop the development of Protractor by the end of 2022 in conjunction with Angular v15. 

This means that users need to migrate from Protractor since there will not be any further updates to the framework. This also means that any bugs or feature requests will not be considered by the Angular team. By continuing to use Protractor, users may end up with disruptions in their automation scripts.

However, the Protractor team has defined a timeline that gives users enough time to look into alternatives and migrate their tests accordingly.

Why is Protractor being deprecated?

Protractor was created in 2013. During that time WebDriver APIs were not yet standard, because of which testers and developers faced difficulties in writing end to end tests as there was very little support for async/await. To overcome these challenges, Protractor used Control Flow by wrapping the Selenium Webdriver API. 

Today JavaScript has evolved a lot and Protractor is experiencing difficulties in leveraging newer technologies. There are modern tools that provide better syntax and development platforms such as IDE, Debugging, etc. Considering this, if the Protractor team were to continue supporting the framework, they might have had to reshape the current architecture and code which would have impacted existing users and tests.

Since there are already multiple alternative tools built on advanced JavaScript frameworks, the Angular team surmised that it may be easier to just switch from Protractor to another tool. The team conducted a survey on automation tools before deciding on Protractor deprecation and the survey revealed that less than 20% of responders were using the Protractor framework for testing in their project.

Top 5 Alternatives Automation Tools for Protractor

Since Protractor is being deprecated, existing Protractor users need to migrate their tests to other frameworks. Listed below are five frameworks that have features similar to Protractor, such as being open-source, support for JavaScript/TypeScript, support for both MVC and Single Page Application, NodeJS, among others. Please note that this list isn’t exhaustive or ranked. 

Top 5 Protractor alternatives to migrate Protractor tests to: 

• NightwatchJS

• Cypress

• Playwright

• TestCafe

• WebdriverIO

Note: The list above is not exhaustive and isn’t ranked.

Let’s take an example of Protractor test code and explore how it looks in other frameworks, along with each framework’s pros and cons.

Protractor Sample Code Snippet

describe("Pricing Page", function () {

  it("Verify Pricing Page", function () {

    browser.waitForAngularEnabled(false);

    browser.get('https://www.browserstack.com/');

    element(by.css('a[title="Pricing"]')).click();

    expect(element(by.css('div h1')).getText()).toContain('Replace your device lab and VMs');

  });

});

Nightwatch.js

Nightwatch.js is an automation testing framework. It is built on Node.js and uses the W3C WebDriver API. Much like Selenium, it supports multiple browsers. NightWatchJS aims to simplify test creation and setting up of CI/CD pipelines. It can be used to create unit, integration, and end-to-end tests.

Nightwatch.js Statistics

• Stars: 10.8K
• Fork: 1.1K
• Used By: 127K
• Contributors: 96
• Weekly downloads: 183,371

Data Source: NightwatchJS Github and NPM

Advantages of Nightwatch.js

• Easy Setup: Nighwatch.js follows an easy setup process. Just install the npm package and start testing.
• Browser Support: Nightwatch.js supports all major browsers like Chrome, Edge, Firefox, and Safari.
• Multi-level Testing Support: Nightwatch.js can be used for unit testing, integration testing, and end to end testing.
• Cloud-Based Testing: Nightwatch.js supports cloud-based testing platforms like BrowserStack, etc.
• Parallel Testing: Nightwatch.js provides a feature called command-line test runner which can run tests either sequentially or in parallel. It also provides additional features like retries and implicit waits.
• Grouping and Organizing Tests: One can organize or group tests by creating test suites and tags.
• Page Object Model: Nightwatch.js supports Page Object model. Using CSS and XPath selectors, testers can organize and manage tests more effectively.
• Continuous Integration: Nightwatch.js tests can be integrated with popular CI/CD tools like Azure DevOps, Teamcity, Jenkins, etc. It comes with a built-in JUnit XML reporter so publishing results is much easier. 
• Easy to Extend: Nightwatch.js comes with a flexible command and assertion framework which makes it easy to implement an application’s custom commands and assertions.
• Easy Syntax: Nightwatch follows a distinctly user-friendly syntax. It’s easy for beginners to start creating automation tests. Detailed documentation helps is especially helpful with learning how to navigate the tool quickly.
• Frequent Releases: Nightwatch.js actively adds new features and fixes issues. Frequent releases can be observed on GitHub to this end.
• Open-Source: Nightwatch.js is an open-source framework that comes with an MIT license.

Limitations of NightwatchJS

• Programming Language: Nightwatch.js supports only Javascript/Typescript.
• Lack of community support: As of the publication of this article, community support is somewhat limited.
• Selenium Dependency: Any complexities that a tester faces with Selenium will follow them to Nightwatch.js.
• Native Mobile Apps: NightWatch.js does not support native mobile app automation.

Code Snippet

module.exports = {

    'Verify Pricing Page' : function(browser) {

      browser

        .url('https://www.browserstack.com/')

        .waitForElementVisible('a[title="Sign In"]')

        .click('a[title="Pricing"]')

        .assert.containsText('div h1', 'Replace your device lab and VMs')

        .end();

    }

  };

Cypress

Cypress is an open-source JavaScript-based test automation framework built on NodeJS. Built for the modern web, Cypress operates directly in the browser so it’s easy for developers to work with. It provides many unique DOM manipulation and debugging techniques. 

Cypress runs tests (written in JavaScript) in its unique and interactive window. It supports different types of testing such as end to end testing, unit testing, integration testing, and API testing. Since it is a NodeJS based framework, testers need to have Node runtime executables in their system to execute Cypress tests.

Cypress Statistics

• Stars: 32.6K
• Forks: 1.9K
• Used By: 235K
• Contributors: 288
• Weekly downloads: 2,384,947

Data Source: Cypress Github and NPM

Cypress Advantages

• Time Travel: Cypress runs in its own window and takes snapshots as the tests run. Hover over commands in the Command Log to analyze what happened in each step.
• Debuggability: Cypress provides various options to debug such as logging, browser developer windows, and detailed stack traces.
• Automatic Waiting: With Cypress, you do not need to provide explicit wait. Cypress automatically waits for commands and assertions before executing the next command.
• Spies, Stubs, and Clocks: Cypress supports spies, stubs, and clocks which helps verify and control the behavior of functions, server responses, or timers.
• Network Traffic Control: Cypress provides various ways to control network traffic, which allows users to test edge cases. 
• Consistent Results: Since Cypress uses its own browser control strategy, it is comparatively fast, consistent, and runs reliable tests that are flake-free.
• Screencaptures and Videos: Cypress provides options to take screenshots and capture videos. This option is present in the command line a.k.a Cypress CLI.
• Cross browser Testing: Cypress supports running tests on Edge, Firefox, and Chrome-family browsers like Electron.

Limitations of Cypress

• Programming Language: Cypress Supports only JavaScript/Typescript.
• Multiple Tab: Cypress does not support multiple tabs or the ability to switch to Parent and Child windows.
• Native Mobile Apps: Cypress does not support native mobile app automation.
• iframe Support: Cypress support for iframes is limited.
• Parallel/Concurrent Execution: Cypress doesn’t support parallel execution of tests on the same or multiple browsers.
• Single Origin Tests: Users cannot create tests under different origins or URLs. Tests must be always in line with single origin. 
• Selector Support: Cypress supports only CSS selectors natively but there are third-party packages that can be plugged to use XPath.
• Assertion Libraries: Cypress supports only Mocha and Chai assertion libraries. 
• Third-party authentication: If testers have to test third-party authentication mechanisms like SSO or Active Directory login, these functions cannot be automated. QAs need to use API calls to create login sessions.

Code Snippet

describe('Pricing Page', () => {

    it('Verify Pricing Page', () => {

        cy.visit('https://www.browserstack.com/');

        cy.get('a[title="Pricing"]').first().click()

        cy.get('div h1').first().should('contain.text', 'Replace your device lab and VMs')

    })

})

Playwright

Playwright is an automation testing framework by Microsoft. It enables fast, reliable, and capable automation across many browsers such as Chromium, Safari(Webkit), Edge, Firefox, and more. Playwright supports multiple programming languages like Java, C#, TypeScript, JavaScript, and Python.

Playwright is still evolving but due to the robust nature of its already available features, the framework has gained thousands of users.

Playwright Statistics

• Stars: 26.7K
• Fork: 1.1K
• Used By: 4.6K
• Contributors: 139
• Weekly Downloads: 269,653

Data Source: Playwright Github and NPM

Playwright Advantages

• Browser Support: Playwright supports all major browsers – Chrome, Safari(Webkit), Edge, and Firefox.
• Safari Testing on Windows and Linux: Playwright supports testing the Safari browser in Windows using WebKit open source builds for Windows, Linux, and macOS. These features are also supported in CI pipelines.
• Headless/Headed mode: Playwright supports headless and headed modes. The headed mode can be used for debugging, and since the headless mode is faster it is well suited for CI/cloud executions.
• Auto-wait APIs: Playwright waits for elements to become ready for interaction. This feature simplifies tests and reduces flakiness.
• Parallelization: One can use a single browser instance for multiple parallelized, isolated execution environments via simple configuration.
• Element selectors support: Playwright can rely on user-facing text content and accessibility labels to select elements. 
• Cross-domains, pages, and frames: Playwright is not limited in terms of domain, opening new windows or iframes. Cypress’s major drawback is addressed in Playwright.
• Stub and Mock: Playwright supports network interception to stub and mock network requests.
• Modern web support: Playwright supports various ways to work with modern web components –  shadow-piercing selectors, geolocation, permissions, web workers, and other modern web APIs.
• Supports Edge Cases: Playwright supports edge cases such as file downloads and uploads, iframes, native input events, and dark mode.
• Debugging tools: Playwright provides multiple debugging tools such as editor debugger and browser developer tools.
• Language Support: Playwright supports multiple programming languages such as Node.js, Python, .NET, and Java.
• Selectors: Playwright supports different types of selectors including CSS and Xpath.

Limitations of Playwright

• Community Support: Playwright is a new tool, so community support is limited.
• Still Evolving: One may encounter some challenges while writing end-to-end tests as Playwright APIs are still evolving. However, if you face issues, you can raise a bug/feature request in Git to get it resolved.
• Inadequate Safari Browser Support: Playwright supports running tests on WebKit (open-source) which is not an actual Safari browser.

Code Snippet

test('Pricing Page', async ({ page }) => {

await page.goto('https://www.browserstack.com/');

await page.click('a[title="Pricing"]');

await page.waitForSelector('div h1');

await expect(await page.innerText('div h1')).toContain('Replace your device lab and VMs');

});

TestCafe

TestCafe is an open-source JavaScript test automation framework built on NodeJS. It doesn’t use Selenium Webdriver or any external tools to run tests. TestCafe runs on the Node.js platform and uses browsers already installed on the tester’s system.

TestCafe is mainly used for end-to-end testing but can be used for API testing as well. It uses Javascript for writing tests and it has its own set of assertions – third-party assertion libraries are not supported out of the box at the moment. Since TestCafe is built on NodeJS, one needs to install NodeJS runtime executables in order to run Testcafe scripts. 

TestCafe Statistics

• Stars: 9.1K
• Fork: 627
• Used by: 8.8K
• Contributors: 99
• Weekly Downloads: 236,160

Data Source: Testcafe Github and NPM

TestCafe Advantages

• Easy setup: TestCafe setup is easy and quick. 
• No dependency: TestCafe doesn’t depend on any third-party libraries like Webdriver or external jars.
• Easy Test Script Creation: TestCafe command chaining techniques make testing easy. It uses friendly and simple syntax so the number of lines (as needed by other frameworks) can be reduced to half.
• Quick and Stable: TestCafe tests are fast compared to other frameworks as they are executed inside a browser. It uses an internal simulation of events using Javascript so tests are comparatively stable.
• Request Mocking: With TestCafe, one can emulate HTTP responses, feed sample data into the application, analyze connectivity issues and downtime cheats.
• Multiple Tab/Window Support: TestCafe provides features that allow automation of the user action in which a user switches between multiple windows/tabs.
• iframe Support: TestCafe supports iframes and allows users to and from iframes.
• Parallel Testing:  TestCafe tests can be run parallelly by enabling concurrency mode.
• No External Waits: TestCafe waits automatically for an element to appear before interacting so there is no need to put external waits.
• Browser Support:  TestCafe supports many browsers like Edge, Firefox, IE, and Chromium-based browsers.
• Debuggability: TestCafe provides Live Mode which helps visualize individual actions on the browser.
• Screenshots: TestCafe supports taking screenshots of tests using built-in screenshot commands.

Limitations of TestCafe

• Programming Language: TestCafe supports only Javascript/Typescript.
• Assertion Libraries: TestCafe supports only built-in assertion libraries.
• Selector Support: By default, TestCafe only supports CSS selectors.
• Execution of Tests: Browsers are not aware that they run in test mode. So there are chances that automation control can be disrupted. It can be quite difficult to analyze or debug issues arising from such a scenario.

Code Snippet

fixture`Pricing`

  .page`https://www.browserstack.com/`;

test('Verify Pricing Page', async t => {

  await t

    .click('a[title="Pricing"]')

    const myText = Selector('div h1').innerText

    await t.expect(myText).contains('Replace your device lab and VMs');

});

WebdriverIO

WebdriverIO is an open-source end-to-end automation framework that supports modern web and native mobile applications. WebdriverIO uses Selenium bindings. It is managed by the OpenJS foundation and follows W3 framework architectural standards.

Though WebdriverIO uses Selenium bindings, it provides a ready-made framework with easy setup and configuration. Using WebdriverIO, testers can create a scalable, robust, and stable test suite. 

WebdriverIO Trends

• Stars: 6.9K
• Forks: 2K
• Used By: 34.1K
• Contributors: 369
• Weekly Downloads: 854,415

Data Source: WebdriverIO Github and NPM

WebdriverIO Advantages

• Extensible: WebdriverIO allows you to add helper functions, or you can combine complicated commands to build your custom functions.
• Multi-Browser Testing: WebdriverIO supports multiple major browsers like Chrome, Edge,  Firefox, etc.
• Multi-Platform Support: WebdriverIO supports many operating systems such as Mac and Windows.
• Mobile Apps Support: This is a unique feature of WebdriverIO. It supports mobile application testing. One can test mobile applications just by using certain configurations.
• Assertion Library: WebdriverIO supports many assertion libraries such as Jasmine, Mocha, etc. 
• Multiple Window and iframe Support: WebdriverIO supports automation of scenarios that contains multiple tabs/ multiple windows and iframes.

Limitations of WebdriverIO

• Language Support: WebdriverIO Supports only Javascript/Typescript.
• Setup: Setup may take some time if the user is setting up a webdriver for Typescript.
• Documentation: Though there is good documentation, it may be inadequate for beginners.
• Syntax: Syntaxes are confusing if you have worked on other tools.

Code Snippet (Webdriver Jasmine)

describe('Pricing Page', () => {

  it('Verify Pricing Page',async() => {

    await browser.url('https://www.browserstack.com');

    await (await $('a[title="Pricing"]')).click();

    await expect(await((await $('div h1')).getText())).toContain("Replace your device lab and VMs")

  });

});

How to Choose the Best End to End Automation Framework for your Organization

Since Protractor is being deprecated, Protractor users don’t have an option other than migrating to alternate frameworks, but the question is “Which is the best alternative to Protractor?”

There is no singular answer for the question, because each organization designs, develops, and tests software in its own way, with unique elements dominating UI Design, Workflow, the Tech Stack used, Architecture, etc.

However, there are a few best practices that should be considered in order to evaluate the most suitable automation framework for your organization.

Points to Consider while evaluating alternatives to Protractor

1. Gather the overarching Organizational Requirements carefully and define a scope.
2. Conduct in-depth analysis to identify trade-offs and limitations of each framework. Analyze if a certain framework’s limitation will be a dealbreaker for the aforementioned requirements.  
3. Consider the learning time involved in mastering a new automation framework.
4. Since you are migrating from Protractor, you need to consider migration effort.
5. Community support and documentation play an important role. For example, if you get stuck with writing test scripts you might need to get answers or workarounds from the community or support team.
6. Never go with trends or popularity. The most popular framework may not be the best framework for your organization. Don’t decide until you create the POC and conclude. 
7. Don’t assume anything. Always create a small POC with real-time test cases relevant to your organization, and decide accordingly.
8. Check Github and the framework’s official website. How active are the contributors? Are there frequent releases?
9. Consider if a framework supports native mobile app testing – if your organization demands the same.
10. Analyze the different types of reporting frameworks supported by each tool. They must be sufficiently powerful to support the team and the organization. 
11. Ensure that the tool supports CI/CD Integration.