What tool to use for end to end testing of SPA (Single Page Application)

Question

What testing tool to use for automating user acceptance testing? The app itself uses react.

Should I use Selenium with various wait strategies, Jasmine or a different tool?

Answer 1

WebDriverIO / Protractor

How about using WebDriverIO or using Protractor since they both are the JS like-version of Selenium, using Cucumber for the BDD syntax. We have a SPA, built using Angular4 , and we run almost 200 e2e scenarios, having vanilla JS code in Protractor, using the various waits and it works pretty good actually.

WebDriverIO: http://webdriver.io/
Protractor: http://www.protractortest.org/#/

Both use the "describe, it" format.

TestCafe

Testcafe doesn't use WebDriver to work with browsers as other e2e solutions do.That is why it requires minimal test environment and it is installed with one command. Besides, this approach allows you to run tests on any physical device without requiring anything but the browser. Other pluses include writing tests in ES6/ES7, automatic waiting as well as the elegant and informative console reporter.

TestCafe - https://testcafe.devexpress.com/

CodeceptJS

CodeceptJS is multi-backend testing framework. It is nothing, but a wrapper that provides syntax to write tests that will run in one of the popular test runners. You can choose from the following options

• WebDriverIO
• Protractor
• SeleniumWebDriverJS
• NightMareJS
• Appium
• Others

The e2e scenarios written are almost kinda similar to how you write feature driven tests using Gherkin/Cucumber, so it becomes an excellent choice for BDD lovers.

CodeceptJS - http://codecept.io/

CypressIO

Another framework that can be used to write e2e tests - in fact it can also be used to write integration as well as unit tests for SPA.

CypressIO - https://www.cypress.io/

Answer 2

nightwatch.js

module.exports = {
  'Demo test Google' : function (client) {
    client
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)
      .assert.title('Google')
      .assert.visible('input[type=text]')
  }
};

One option is nightwatch.js
One example is to have a single page object file in Nightwatch for each entire site.
For example, one site has about 200 lines of structure declaration and css selectors, and 200 lines for helper functions, e.g. login. There is plenty of "click this, wait for that to be visible, now click this, now wait for that to be invisible".nightwatch lets you see the entire journey and the building blocks that can be reused, all represented together in one place.

Answer 3

Well, like any other type of web application, single-page applications contain multiple layers of logic such as database connections, request handling, input form validation, template rendering, and so much more. For this reason, end to end tests are required to validate the functionality and usability of an application. Through end-to-end tests, you can uncover performance issues, high-bandwidth consumption, slow loading speed, and other issues on the client and server-side that might affect user experience.

To ensure your end-to-end tests are effective, you must choose the right testing tool. I have used quite a number of tools throughout my life as a developer and project lead. However, one of the most effective and easy-to-use testing tools I ever used is TestCraft. TestCraft is a codeless test automation tool based on Selenium, one of the most popular frameworks for testing web applications. With TestCraft, you can create and run end-to-end tests without having to write the test scripts manually. I am talking about codeless selenium.

I also wondered how this works at first but creating and executing tests using TestCraft is pretty simple and straightforward. All you need to do is go to their dashboard and initiate the process by supplying the required project details like test name, URL to test (your SPA), and the testing platform to use. This initializes the project and takes you to a dashboard where you can create, edit, and run end-to-end tests for your application, as shown below:

On this dashboard, you can test as many elements as you wish on your application. Additionally, you can add multiple test steps on a single element by configuring the test parameters and providing all the required test data.

Additionally, you can also write failing tests and see if your SPA passes. Once you’re done editing all steps in your end-to-end test flow, hit run, and check your test results.

The beauty of TestCraft is that it allows you to create and run any kind of test you would on Selenium without having to write code.

Answer 4

jest

If testing React, one option is to use Jest

https://facebook.github.io/jest/docs/en/getting-started.html#content

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Complete and easy to set-up JavaScript testing solution. Works out of the box for any React project.

Instant Feedback

Fast interactive watch mode runs only test files related to changed files and is optimized to give signal quickly.

Snapshot Testing

Capture snapshots of React trees or other serializable values to simplify testing and to analyze how state changes over time.

Zero configuration testing platform

Jest is used by Facebook to test all JavaScript code including React applications. One of Jest's philosophies is to provide an integrated "zero-configuration" experience.

---

However I'm not sure if Jest is suitable for end-to-end testing as opposed to unit testing javscript.

Answer 5

Jasmine

Jasmine is certainly one option.
It has the 'describe it' syntax that will familiar to some from other BDD tools such as rspec for ruby.
It can be used in various ways and may be suitable for end user testing

Answer 6

mocha

http://mochajs.org/

Use the "describe, it" syntax
Runs on node
Usually paired with Chai for the assertions (should, expect, etc).
Can use https://github.com/Automattic/expect.js for the 'expect' syntax

http://mherman.org/blog/2015/09/10/testing-node-js-with-mocha-and-chai/#.WXz6I6x96zc