setup-protractor-e2e-tests-with-aurelia-cli-apps/

[utterances-bot]

Setup Protractor E2E Tests with Aurelia CLI Apps | Pragmatic Coder

Keeping things understandable ... most of the time

http://pragmatic-coder.net/setup-protractor-e2e-tests-with-aurelia-cli-apps/

[arman-m]

Nice article! Thank you! I tried to follow the steps but can't figure out how do you actually run the test after installing all of this? For unit tests I can do "au test" and I believe there's a "test.ts" gulp task in aurelia_project/tasks folder but I don't see e2e.ts anywhere. Would you mind explaining it?

[zewa666]

Hi @arman-m,

meanwhile a lots of things have changed with the CLI and it is now able to scaffold protractor. If you install npm install -g aurelia-cli@latest and start a new (custom project), you'll eventually be asked whether you'd like to configure e2e tests. If the project is previously setup on TypeScript it will now do everything needed also for Protractor.

Anyways, in order to avoid having to recreate the whole project I'll paste here the default task that gets generated:

// aurelia_project/tasks/protractor.json
{
  "name": "protractor",
  "description": "Runs Protractor and reports the results. Start the application before running this task."
}

// aurelia_project/tasks/protractor.ts
import * as gulp from 'gulp';
const {protractor, webdriver_update }  = require('gulp-protractor');

gulp.task('webdriver_update', webdriver_update);

gulp.task('protractor', (cb) => {
  gulp.src(['test/e2e/**/*.e2e.ts'], { read: false }).pipe(protractor({
    configFile: 'test/protractor.conf.js'
  })).on('end', cb);
});

// Setting up the test task
export default gulp.series(
  'webdriver_update',
  'protractor'
);

You'd want to modify the configFile property of the protractor task to point to protractor.conf.js instead, following the approach of my article.

Now running au run to start up the app and in a second terminal au protractor will automatically check whether the latest drivers are available (make sure that your chrome is up-to-date ;) ) and then start the protractor tests.

[arman-m]

Thank you so much, @zewa666 for taking the time to write this all up! I didn't know the new cli has it all already so I went through the pain of rediscovering all and putting the pieces of the puzzle together. So short story is I came up with a very similar setup, the only difference is, in my case my task name is e2e and I can fire it up with "au e2e" but the rest is essentially the same. I also looked into testcafe and it is so much simpler to get up and running with it and it has no webdriver dependency. Have you looked into testcafe? I'm curious to know what you think about it. I'm tempted to go with testcafe but don't know if there are bad gotchas ahead of me.

cheers!

Arman

[zewa666]

Hey @arman-m,

it's great to hear that you had the ambition and motivation to learn things by trying to set them up by yourself. I'd argue this is one of the most important parts one can learn, as only by trying to recreate something, you stumble about what the intention and the purpose of a solution was. Plus you learn tons of new stuff which will definitely pay-off sometime down the road ;)

With regards to your question about Testcafe. It was about 2015 when I started to work for Ranorex, which is a company building a cross-platform/device testing tool. Now given the desire to test solely a website, this tool, besides its hefty price, would certainly be overkill. Nevertheless, while working on a new product, we also stumbled across TestCafe by DevExpress. Also in the same period of time Cypress was started. Nowadays the whole JS world is going crazy for Cypress as it's a super quick and promising solution. Yet it has the downside of only support JS/TS as code language and only targeting Chrome. With regards to TestCafe I'd argue to that this tool offers a solution to those shortcomings of platforms, yet is a bit heavier, compared to API and feature sets.

If you ask me personally, I'd ALWAYS go for a Webdriver based solution, which both TestCafe and Cypress are not. The reason for this is simple. Webdriver is a de-facto and soon real standard. You're not limited to one browser, but can only use the same API and setup for Mobile testing (Appium) and sooner or later also for Desktop Testing (my company is working on something here ;) ). It is more complicated, yes. But at the same time you get tons of more flexibility (code language, setup and architecture) and potential target test domains. I'm currently working on a product called Webtestit which aims to be a IDE exclusively designed for Webdriver based tests (Java + Selenium or currently also TS + protractor, more languages and combinations to come). So not only I but even my company, and a whole portion of the testing market is making there bets on Webdriver, for the last few years already. Cypress and TestCafe are nice, but Webdriver is here to stay.

As such I guess it boils down to your preference. Wanna get started quickly and Chrome is all you need? Take Cypress. Need more browsers and don't mind a bit heavier API? Take TestCafe. Want to have full flexibility of your architecture, language and perhaps even target more platforms? Definitely stay with Webdriver. Whether that is Protractor (which is solely a wrapper on top of it) or pure Webdriver.js is all about your personal preference. Keep in mind that community wise Selenium beats all of the others together and Cypress slowly taking up the pace.

Hope that helps a bit.