DEV Community

Cover image for Which framework use for an e2e tests of an SPA?
Rafal Pienkowski
Rafal Pienkowski

Posted on

3

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.

Top comments (19)

Collapse
 
isaacdlyman profile image
Isaac Lyman

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.

Collapse
 
rafalpienkowski profile image
Rafal Pienkowski

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.

Collapse
 
ben profile image
Ben Halpern

We need to get around to implementing Cypress.

Collapse
 
isaacdlyman profile image
Isaac Lyman

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

Collapse
 
rhymes profile image
rhymes

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...

Collapse
 
isaacdlyman profile image
Isaac Lyman

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

Thread Thread
 
rhymes profile image
rhymes

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?

Thread Thread
 
isaacdlyman profile image
Isaac Lyman

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

Thread Thread
 
rhymes profile image
rhymes

Thanks for the support :-D

I'll take a look at cypress

Collapse
 
chrisvasqm profile image
Christian Vasquez • Edited

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.

Collapse
 
rhymes profile image
rhymes

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...

Collapse
 
rafalpienkowski profile image
Rafal Pienkowski

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.

Collapse
 
peterfication profile image
Peter Gundel

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.

Collapse
 
aberonni profile image
Domenico Gemoli

Another +1 for Nightwatch from me - for anyone looking how to get started this might be useful

Collapse
 
ralucas profile image
Richard Lucas

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

Collapse
 
markwhitfeld profile image
markwhitfeld

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.

Collapse
 
rafalpienkowski profile image
Rafal Pienkowski

Thanks for your suggestion.

Collapse
 
m1xo_0n profile image
Michael Morozov

CodeceptJS. Just give it a try.

Collapse
 
rafalpienkowski profile image
Rafal Pienkowski

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

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay