Which framework use for an e2e tests of an SPA?

Hi all!

I want to ask you which framework could you recommend me for an end to end tests of a Single Page Application. What is your suggestion what are advantages and disadvantages of frameworks you're using?

Currently, I'm using Selenium WebDriver and I'm writing tests in .Net but I've faced some problems which are related to the creation of DOM elements by an angular app. I've read about Protractor but I'm interested in your opinion.

Thanks in advance.

Did you find this post useful? Show some love!
DISCUSSION (18)

Cypress is the best e2e testing framework I've ever used, by a long shot. It's still young (only works in Chrome so far) but it's very smart.

With Webdriver, you may find yourself writing a lot of sleep(500) statements to wait for elements to appear on screen. In Cypress, it automatically waits for elements to appear. In Webdriver and Protractor, you often have to chain Promises in order to use the results of a DOM query. In Cypress, expectations allow enough complexity that you very rarely have to write asynchronous-style tests.

On top of that, it has a fantastic UI, lets you step through failed tests (with snapshots of your webpage at each step) and automatically takes video of the entire test process.

Thanks a lot for your replay. To be honest support only for one browser is in my case a blocker right now but I'll look closer to that tool.

I know that stopping test execution by sleeping a thread (which is required for DOM to be prepared) is a pin if a neck. Selenium contains such a wait for an element, but this is cumbersome in my case. That is the reason why I'm looking for an alternative.

Cheers.

We need to get around to implementing Cypress.

I'd be happy to get you started. Hit me up with that GitHub access and I'll get you a PR. :)

I'll definitely take a look at it, thanks!

I've been using TestCafe which seems super nice but it doesn't support stubbing responses which cypress seems to be able to do docs.cypress.io/guides/guides/netw...

Yep! Although I've never stubbed a response, as I feel that would defeat the purpose of an end to end test.

I agree in theory but how do you deal with running the e2e on endpoints which require a lot of seed data or with CI then?

Do you seed the testing database, start a "testing server backend" and then run e2e on it? Isn't it super slow?

Yep, that is what I do. And admittedly it is slow. My tests, altogether, take probably 5 or 10 minutes to complete.

Thanks for the support :-D

I'll take a look at cypress

Hey Rafal,

As an alternative to Selenium, I'm a fan of TestCafe, it's fairly simple to install using npm and supports both JavaScript and TypeScript (which might feel better coming from .NET).

Things I like about it:

  • How fast you can start working.
  • It handles waits automatically.
  • Supports multiple browsers out of the box with also concurrency (let's you have N instances of any browsers at the same time with no extra setup).
  • There are a few extensions for VS Code to make our lives easier with code templates and right click to run an specific or group of tests.
  • While the test are running, it shows a waiting bar at the bottom of the window so you know when it is not able to find an element.
  • And it renders a big mouse pointer to show where exactly it is clicking on the page.

I wrote a few posts as examples which you can find here.

I've tried TestCafe but I couldn't make it work with webpack's dev proxy server and mocking.

I have the frontend separate from the backend and I would like to test the frontend isolated from the backend.

You can even find my github comment about it here - github.com/DevExpress/testcafe/iss...

Hi Christian.

Thanks for your replay. I'll look closer to the TestCafe. Great that you've written some posts with examples of usage. I think they will be beneficial for me.

Cheers.

Some colleagues have had great success with Katalon studio. In our organisation where most e2e testing frameworks have been thrown out of the window in frustration this is saying a lot.
It apparently plays well with CI and is tester friendly.
I haven't tried it myself but will definitely do so at the next opportunity.
Worth a look.

I hadn't so much with Protractor and React. Therefore, I looked for other options and found Nightwatch. It works pretty well so far and the page objects are a really nice abstraction.

However, I recently checked out Cypress and I might want to switch to it.

+1 for Nightwatch, was able to build nice CI utilizing this

Thanks. I'll give it a try. On a first glance I like the syntax of it.

Classic DEV Post from May 21

Quick Advice For Junior Devs

Some thoughts for junior devs.

READ POST
Follow @mattsparks to see more of their posts in your feed.
Rafal Pienkowski
I'm focused on developing and expanding my knowledge and skills. Enjoying new challenges. I'm assuming that there are no stupid questions, there are only silly answers.
Trending on dev.to
The Minimum You Should Do To Prevent Memory Leaks in Swift
#ios #swift #testing #learning
Shine a light on JavaScript performance with Lighthouse
#javascript #webperf #lighthouse #webdev
5 ways to make your codebase withstand the test of time
#webdev #architecture #designpatterns #legacy
Notes on my first PHP job
#php #juniordeveloper #webdev
Friday Frontend: Check out the Vue Edition
#javascript #css #webdev #vue
What is Data Binding?
#javascript #webdev #beginners #data
5 helpful features in Chrome's DevTools
#devtips #webdev #javascript #productivity
Which monitor should I buy for programing?
#discuss #webdev