DEV Community

loading...
Cover image for 5 reasons you should not use Protractor in 2020

5 reasons you should not use Protractor in 2020

davert profile image davert Updated on ・6 min read

TLDR: There is a chance that you might still want to use Protractor when version 6 is released. But not today. As of today, it is recommended to switch to modern frameworks like webdriverio or codeceptjs.

Protractor is a very popular end 2 end testing framework for NodeJS. It was started as a testing tool for Angular Framework but then overgrew to become a de facto standard of testing in JavaScript. However, nowadays, it doesn't feel so well. The web has changed, the JavaScript ecosystem has changed, the Selenium has changed, but Protractor didn't. And if you still use it, or you consider using it because of its popularity - stop that. Today is not a good day.

So what happened to Protractor?

1. Protractor is not updated

Protractor was not actively updated for a few years. No major improvements, no bug fixes, no documentation updates. You can see tons of old issues in the main repo and absolutely no movement in commits for a few months.

It also became out of sync with its main dependency Selenium WebDriver JS. Right, Protractor is based on the official Selenium WebDriver library to drive browsers over W3C protocol. However, Selenium WebDriver was not updated for two years and now they are moving to 4.0. Protractor was not actively developed as well for those years, and you may see outdated documentation or long-standing issues. Protractor is almost ready to switch to this version but this still a big issue to end-users. As they will need to rewrite all their tests!

2. Protractor 6 will break compatibility

In Protractor 5 promises were synchronized using control-flow mechanism. This was also taken from the selenium-webdriver library. However, selenium-webdriver is dropping support of control flow in version 4. This means that once Protractor is upgraded to selenium-webdriver 4 it will drop it as well. So all your tests should be rewritten using the async/await pattern.

Using async/await gives you better understanding and more control over promises. However, it can be harder for developers in tests to switch to this new style if they are not familiar with it. Currently, Protractor follows Java-style syntax, so engineers experienced with Java can easily go to Protractor. After a switch, each browser call should be wrapped with await keyword. Missing even one await will lead to broken and unpredictable tests.

So async/await is coming. You will need to update your codebase and train your engineers. The problem is we don't know when exactly it is coming! Protractor 6 was tagged but never released due to some critical issues. And no estimates when a new version will be released!


(from: https://github.com/angular/protractor/issues/5290)

3. Protractor is overcomplicated

The next problem of Protractor is the design which is highly inspired by Java and is very complicated for the JavaScript world. Protractor adds thousands of lines of code on top of a very big selenium-webdriver library and when something goes wrong you don't have any idea why and where the bug has happened.

Protractor tries to tie up selenium-webdriver, Jasmine, Angular but in the end, they produced a very complicated setup with huge configs, and hard to read tests. At least senior JavaScript developer is required to prepare a good Protractor setup.

Protractor exposes WebElements into tests. So instead of controlling a browser, you control only some HTML elements on a page. But you can't get direct access to those elements from a test, as your browser is executed externally.

Wrapping hundreds of elements, calling commands on them, filtering them and mapping brings you out of the scope of testing. You spend most of the time not writing tests but fighting web elements. Congrats! Now you are a senior element controlling engineer! Whatever it means.

4. Protractor not driving a good design

Take a look of this code. This is quite a common picture of what Protractor tests can become. You don't understand what happens and you don't even want to look into this hell!

product.element.all(by.xpath(cons.xpathproductRate())).then(function (products) {
    var i = products.length;
    (function loop() {
        product.sleep(1000);
        var product = cons.xpathproductRate(i);
        product.element(by.xpath(product)).click().then(function () {
            main.waitForElementAndClick(product, cons.linkRemoveproduct).then(function () {
                main.waitForElementAndClick(product, cons.radiobtnRemoveAll).then(function () {
                    main.waitForElementAndClick(product, cons.btnRemoveproduct).then(function () {
                        i = i - 1;
                        if (i > 0) {
                            loop();
                        }
                    });
                });
            });
        });
    })();
});

You can say that bad code can happen everywhere. But this is a result of overcomplicated design in Protractor. The indirect control of web elements with promises everywhere tends to drive design full of chained methods and loops.

This makes tests unstable and not readable to humans.

5 Protractor is not required for Angular

Protractor started as a primary tool for the AngularJS framework. It was the most popular framework for single-page applications when there was no React or VueJS. Angular is still widely popular but the truth is that you don't need Protractor to test Angular application.

The only key feature of Protractor for Angular was synchronization. Protractor waits for Angular to finish rendering before taking any action on-page. This worked fine in the era of AngularJS 1 but it is less and less stable as Angular evolves. Modern Single Page Applications are built around components and there is no single point of truth if a component has finished rendering or not.

So instead of relying on Angular to synchronize components by some magic, it is more reliable to use explicit Selenium waits like browser.wait(EC.visibilityOf($('#abc')), 5000);

So what are alternatives to Protractor today?

Today Cypress.io takes popularity. Should you rewrite your tests to it?

The answer is NO!

Picking a tool by their popularity is a bad idea at first. But Cypress is quite different technology for different tasks than Protractor. It plays well for testing components of a web application, but it can't replace Protractor as Cypress does not support:

  • iframes
  • file uploads
  • native events
  • any other browser except Chrome
  • xpath
  • multiple windows and tabs
  • testing sites you don't control
  • page objects

So if you want to have the cross-browser support for a test, rich ecosystem with services like SauceLabs or BrowserStack, you should look for other Selenium tools instead.

webdriverio

Webdriverio is an alternative webdriver implementation not based on selenium-webdriver with elegant and more consistent API. webdriverio also support testing native mobile apps with appium.

As of today, webdriverio is the best webdriver implementation in JavaScript. It has rich functionality including react selectors, shadow dom support, it can even use DevTools protocol for testing!

Unlike, Protractor webdriverio receive constant updates, it has a very active community of developers, and it just rocks!

codeceptjs

Another alternative would be to use CodeceptJS - a framework for supercharged end 2 end testing. Unlike, Protractor CodeceptJS do not expose web elements, its tests are written in a scenario-based manner, where all actions are explained from the eyes of a user:

Scenario('create todo item', (I) => {
  I.amOnPage('/');
  I.dontSeeElement('#todo-count');
  I.fillField({model: 'newTodo'}, 'Write a guide');
  I.pressKey('Enter');
  I.see('Write a guide', {repeater: "todo in todos"});
  I.see('1 item left', '#todo-count');
});

CodeceptJS do not control a browser by its own. Instead, it delegates a browser control to other libraries, like webdriverio or Protractor. So yes, you can still execute tests in Protractor without the pain of maintaining Protractor code!

CodeceptJS takes a different approach in the end to end testing. But because you don't need to think about how to control web elements your tests become easy to follow, write, and debug. CodeceptJS provides you not only a tool to run browsers but best practice architecture to build sustainable end 2 end tests.

If you didn't have a chance to look into CodeceptJS, it's a good time to do so!

Conclusion

Protractor powers lots of tests out there. But it doesn't stand a test of time. Maintaining old code written in the days of Protractor and Angular glory can be more expensive than rewriting all tests from scratch! Nowadays, it is no use to rewrite those tests in Protractor as its future is not clear. However, it's a good day to try modern frameworks like webdriverio or codeceptjs!

Discussion (18)

pic
Editor guide
Collapse
paulogoncalvesbh profile image
Paulo Gonçalves • Edited

The reason 2 to 5 isn't a argument, only the 1 is a argument to why don't use protractor.

1. Protractor is not updated
Yeah, 8 months on version 5.4.2, because the version 6 has some problems :(

2. Protractor 6 will break compatibility
That's normal on any major release on any framework, because the most open source project use semantic versioning.

3. Protractor is overcomplicated
That's not true, is so easy and had many good features, the setup is so easy, the minimum needed is where directory the spec are.

Example:

//protractor.conf.js
module.exports.config = {
  specs: ['src/spec/*.spec.js'],
};

4. Protractor not driving a good design
That's not true, your example is a result of the knowledge of the coder who does not know good automation practices. In any framework it will create a bad design like this.

5. Protractor is not required for Angular
Why that's bad?

Suggestion: Learn about protractor-helper to create robust and flakiness free tests.

Note: Webdriverio and codeceptjs can't be considered a 'modern framework', is only one more with less suport and feature.

Collapse
warioneila86 profile image
Mario

Agree.

About reason #2, in our company we already updated our tests (thousands) to use async/await two years ago, just to be prepared when the upgrade comes.

We had the whole team working on that and it took us like 3 days to get the whole framework updated. Not a big deal, to be honest.

The protractor upgrade didn't arrive yet, true, but our code is much more readable and maintainable now 😍

Maintaining your tests must be part of your work IMO.

Collapse
jsunaina1 profile image
jsunaina

Thanks for the awesome information!!

What would you recommend as a substitute of Protractor.
Do you think we will still be able to run tests using Protractor 5.4.2 with future browser versions?

Collapse
davert profile image
davert Author

I assume - yes, Protractor will work, as Selenium team support legacy implementations. However, new features or protocol extensions won't be available. Anyway, don't blame yourself if you already use it. No need to worry. But it's not a great idea to choose Protractor for the next project.

Collapse
paulogoncalvesbh profile image
Paulo Gonçalves

I recommend Cypress, with him is possible to do E2E and Unit tests.

Do you think we will still be able to run tests using Protractor 5.4.2 with future browser versions?

Sure, totally possible.

Collapse
funder7 profile image
Federico Ricchiuto

I just checked if protractor is the official e2e test tool, and looks like it is, speaking of Angular 10. I trust Angular team, if they are still using this tool probably there are good reasons for keeping it.

Honestly I added this comment because I don't like that a project quality is judged by the its number of releases. As others said, a major version introduces breaking changes, so it can be backwards compatible but it doesn't have to. It's up to the project team to merge the most important bug fixes on older major versions, but again they're not obliged to.

Also don't consider the number of open issues as an indicator of quality: sometimes people is just not using the tool correctly, or they are looking for tips on how to do something. The fact is that Angular is very popular, and Protractor is its official e2e test tool, so you can easily imagine why many people is using the repository issue board to ask things that are not bug related.

If I was you, in order to complete this article and make it more "credible", I would add at least a good alternative to it, and for alternative I mean something that has Tons of reasons to justify the migration from an official tool to one unofficial!

Cheers ;)

Collapse
xfaramir profile image
Xfaramir

Protractor is maintained by Google and supports typescript
Just because they haven't updated it in a while doesn't mean still not the best framework for automation. Even better than selenium java.

Collapse
davert profile image
davert Author

Protractor is maintained by Google

Well, that's a myth. There is only one person working in spare time on this huge project. It was maintained by Google but not now.

Just because they haven't updated it in a while doesn't mean still not the best framework for automation.

If they won't change their policy on maintaining it won't be the best framework. I'm just rising awareness of that problem.

Even better than selenium java.

There are more alternatives than just Java. I hope you can find time to investigate more tools for testing so you could see Protractor is not the best at the market.

Collapse
xfaramir profile image
Xfaramir

BTW CodeceptJS should not be considered as alternative to Protractor, but rather a testing framework that leverages this powerful library. So maybe webdriver.io could be an alternative but don't see anything better tgan protractor.

Collapse
praveendvd profile image
praveendvd

I feel sad for people who took this article seriously, now the library is maintained by angular, it's being developed actively, await made the life much easier and cleaner, await removed the complexity of the framework, page object model is the slogan for any automation project

Collapse
spleshakov profile image
spleshakov

Such a nonsense to be honest in my opinion... Yes, sooner or later Protractor may be a bad choice, but why I disagree to the mentioned as of today:

  1. How is it not updated? just take a look at the history of releases github.com/angular/protractor/rele... and then status of pull requests
  2. This item should have been 'Protractor 6 will break compatibility if you don't make the transition'. Which essentially is - your code will break if you don't maintain it. Thanks cap. But I'm thinking about benefits I get like readability, and resolving what you mentioned under #4
  3. Yes, maybe. Not more complicated than Java+Selenium stack though. But in the end who cares, if eventually you talk to the last layer of the stack (protractor itself), which is pretty straight forward. You don't mention how NodeJS is complicated under the hood, but why would you care if use don't need to know it to start using it, right?
  4. That exactly the point why async/await were brought to the game, to solve this 10 level code structure
  5. Nothing in particular is required for testing, it's always what you like/prefer, so why not Protractor? which has very good community support, unlike many new tools (at least for now)

Don't get me wrong, the practice shows that those who don't make transition to newer technologies timely, lose their marketability. But that's not about Protractor in 2020

Collapse
bwanamaker profile image
Brandon Wanamaker • Edited

It looks as though Protractor v6 isn't happening and the project is jumping straight to v7. The v6 packages on NPM have been marked as deprecated. Just FYI, not that it changes anything you've written, but I thought it was an interesting move on their part.

Collapse
davert profile image
davert Author

Yes, thank you! The post is very provocative but still true.
Even they jumped to 7 they didn't introduce anything huge in codebase, as the codebase is still a big mess. So project still faces stagnation

Collapse
trigunam profile image
Triguna Mutuguppe Sripathi • Edited

I came here from github.com/wswebcreation/protracto...

As we are actively using the above plugin with Protractor for testing.

I do not agree with every point you made against Protractor, however, the other frameworks mentioned is not solid as such and new to the market as well.
With recent upgrades from protractor, I believe it is stable. If there are more contributors to protractor itself, we could make it stronger as a framework.

Collapse
moinuddin14 profile image
Khaja Moinuddin Mohammed

Definite alternatives to Protractor are

  1. Puppeteer
  2. Cypress
  3. WebDriverIO
  4. Playwright (Still in beta)

All the above other than WebDriverIO are not based on Selenium which is a good thing.

Collapse
moinuddin14 profile image
Khaja Moinuddin Mohammed

BTW, to answer some pointers raised in the article against Cypress

iframes: This article explains how to work with iframes cypress.io/blog/2020/02/12/working...

file uploads: How to work with file upload with Cypress github.com/cypress-io/cypress-exam...

native events: Yes this is a big issue which they are actively working on github.com/cypress-io/cypress/issu...

any other browser except Chrome: They have recently started supporting firefox docs.cypress.io/guides/guides/laun...

xpath: Cypress has this beautiful concept called plugins and with that it's possible to extend the capabilities of cypress, one such example is using external node module for working with xpath, I personally used this and it works well npmjs.com/package/cypress-xpath

multiple windows and tabs: It's true that Cypress doesn't support multi tab and multi window but they have given reasons for not supporting that, which to me makes sense. We shouldn't be testing the browser features instead the application feature. Also, multi tab and multi browser scenarios are quite brittle. These are one of those flaky tests that has plauged the testing community for so long. Time to take these tests out of the test suite.

testing sites you don't control: Honestly, didn't get this point

page objects: As Page Objects is only a concept and not language/framework specific, ideally we should be able to use with almost any testing tool/framework. But then there are alternatives to Page Objects like SerenityJs's Screenplay Pattern, again PO Pattern makes things more complex. Cypress has a better way to handle with Custom cypress.io/blog/2019/01/03/stop-us...

Also, Cypress is ever evolving and they are going places to reach audience and gather feedback. Looks to me they are truly on their mission to provide a better alternative to Selenium.

Collapse
chandrasekhaer profile image
chandrasekhaer

One more feature why we not use protractor;
Re-run only Failed test cases.(not supported by protractor)