GUI Testing Angular SPA?

Question

Developer here. Our QA team is researching new strategies for E2E testing for a new product. To start, it will be an Angular SPA, and eventually a PWA.

They are leaning towards using Quantum / Perfecto, but some concerns have been expressed around the asynchronous nature of the SPA requiring waits and causing intermittent failures.

The most common solution I see to this problem is to use Protractor, which is built with Angular in mind. However, this requires a level of development that our current QA team can't manage.

Would anyone have any tool suggestions that would be easier for our QA to pick up? Or is there some way to tie Protractor into Quantum to leverage it's wait functionality, while still being able to use the GUI for Quantum tests? Aren't they both powered by Selenium?

Any other tips or tricks related to SPA development? Are we making this a bigger problem than it needs to be?

Thanks!

Answer 1

A partial answer could be using cucumber with protractor, you'll have the stability of Protractor with the simplicity of cucumber's DSL. You can actually choose any other test framework to be used with Cucumber, like Cypress, some frameworks are better fitted to some scenarios than others, here's a good introduction (although it is slightly outdated, for example about Protractor).

You, as developers, might need to set up the infrastructure and maintain a page object.

Setup is a one time effort that shouldn't take too long for an experienced developer, there's a lot of documentation and examples online.

Maintaining a page object as part of the development process have many positive side benefits, for example always keeping the test environment in sync with the product or being used as simple regression test and will strengthen the relationship between testers and developers. Again this is not a big effort per change once the basics have been created. Add "update the PageObject" to your definition of done to ensure that it is being done.