General

2 minutes read

Cypress.io announced that with v4.0, Mozilla Firefox and Microsoft Edge (Chromium based) browsers are supported.

Cypress

This update is quite huge for the software testing community, since the other competitor of Cypress.io, TestCafe was supporting Firefox and Edge browsers for a while now.

Check the full comparison between Cypress and TestCafe.

Running Tests in Firefox

All you need to do is to have Firefox installed on the machine from where you are running the tests:


cypress run --browser firefox

or


"scripts": {
  "cy:run:chrome": "cypress run --browser chrome",
  "cy:run:firefox": "cypress run --browser firefox"
}

Or Firefox Developer/Nightly Edition:


cypress run --browser firefox:dev
cypress run --browser firefox:nightly

To run Firefox in the headless mode, you can pass the –headless argument to cypress run. By default, Firefox will launch in headed mode.

Similar for Microsoft Edge:

Microsoft Edge (Chromium-based):


cypress run --browser edge

Or Microsoft Edge Canary (Chromium-based):


cypress run --browser edge:canary

Running Specific Tests by Browser


// run Cypress tests only in Firefox
runOn('firefox', () => {
  describe('test suite', () => {
    it('...')
    it('...')
  })
})

Ignore tests if Cypress tests run in Firefox


// not recorded in Cypress Dashboard
ignoreOn('firefox', () => {
  it('test', function() {
    // ... test assertion
  })
}

Skipping tests is different than ignoring tests, since when a tests a skipped it’s still displayed in the test result reports:


// Skip the test, but still record it to the Cypress Dashboard
it('a test', function() {
  if (!Cypress.isBrowser('edge')) {
    this.skip()
  }
  // ... test body
})

JavaScript

1 minute read

When to add ‘use strict’ in JavaScript and what implications implies.

If you don’t use 'use strict', the context of this will be the global window object.


function getName() {
    console.log(this)
}

getName()

When using strict mode, the context of this inside a function on the global context will be undefined:


'use strict'

function getName() {
    console.log(this)
}

getName()

Overall, it’s a best practice to use the strict mode in every file (no need to do this is module, since they use strict mode by default) as it reduces the probability to have an unexpected scope.

Rarely, someone will refer to the window object using this.

To use the strict mode inside a function, you need to add 'use strict' inside the function, before any other instruction.

JavaScript

1 minute read

bind() method creates a new function, when called has its this keyword set to the provided value

Let’s have a look at a sample code, on how to use the bind() function:


const person = {
    age: 20,
    getAge: function() {
        return this.age;
    }
}

const unBoundedGetAge = person.getAge;

console.log(unBoundedGetAge())

If we run the code, we’ll get undefined as the output.

We need to bind the getAge method to the person object, in order to use the this reference.


const person = {
    age: 20,
    getAge: function() {
        return this.age;
    }
}

const unBoundedGetAge = person.getAge;

const boundGetAge = unBoundedGetAge.bind(person)

console.log(boundGetAge())

Running the code now outputs the actual age: 20

bind() function is useful when the function need to be called in future events.

JavaScript

1 minute read

call() or Function.prototype.call() method calls a function with a given this value and arguments.

Let’s have a look at an example how to use call() method:


function Product(name, price) {
    this.name = name;
    this.price = price;
}

function Food(name, price) {
    Product.call(this, name, price);
    this.category = 'food';
}

console.log(new Food('cheese', 5).name);

Output: cheese

apply() or Function.prototype.apply() method is similar to call(), the only difference is that the arguments are sent as an array.

call() and apply() are builtin methods on every JavaScript function.

Other builtin methods are:

  • Function.prototype.apply()
  • Function.prototype.bind()
  • Function.prototype.isGenerator()
  • Function.prototype.toSource()
  • Function.prototype.toString()

Frameworks JavaScript Test Automation

3 minutes read

Creating automated tests for your website, web application or mobile application was never an easy task.

Most of the companies started using Selenium WebDriver for test automation, which was a game changer 5-7 years when first started getting traction, but it came with few challenges like:

  • selectos flakiness
  • retry mechanism
  • multi-tab testing
  • limited report
  • mobile testing

The new testing frameworks are trying to improve most of the above issues, while offering a more integrated testing framework, easier to use and get started without the test flakiness the developers were experiencing while running Selenium WebDriver tests.

We are talking about Cypress.io and TestCafe.

More details on how to create your testing framework with TestCafe is available in our course: Build an End to End Software Testing Framework with TestCafe Course

TestCafe Course

TestCafe

Prerequisites

  • Chrome, Firefox or Safari browser needs to be installed

How to install TestCafe

npm install testcafe –save-dev

How it works

TestCafe works by serving the test site via a proxy server, the server injects scripts into the page which can inspect and control elements onto the page.

It works in any web browser or mobile devices and cloud services like BrowserStack and SauceLabs.

TestCafe runs the test code in Node which enables the possibility to call out to parts of your Node server application directly from the tests.

TestCafe uses standard CSS selectors to locate elements

TestCafe has framework specific extensions for React, Angular or VueJs and allows the use of component names as selectors.

TestCafe has nice console output for test failures (similar to Jest) that shows which assertion failed and mitigates the potential issues of having many assertions in a single test.

TestCafe groups tests as a fixture.

Advantages

  • no WebDriver needed
  • good TestCafe framework documentation
  • big contributor community
  • fast and reliable
  • standard CSS selectors
  • feels like a mature project (coming from a commercial project)
  • React selector extension
  • parallel execution supported in the framework
  • synchronisation handled by the framework
  • live reload/retest
  • allow interacting with native alerts
  • debug command for easier test debugging
  • debug made easy by the TestCafe UI (step over, resume)
  • Screenshots generated on fail
  • JavaScript errors are caught by the framework
  • cross browser support: Firefox, Chrome, Safari
  • Jenkins error reporting integrated
  • Headless browser Chrome without the need to install it by using: “testcafe-browser-provider-puppeteer
  • integrates easily with SauceLabs and BrowserStack
  • TestCafe Studio – record and playback tool (TestCafe alternative to Selenium IDE)

Disadvantages

Still under heavy development

Cypress

Prerequisites
Chrome browser needs to be installed locally to run tests on Chrome.

How to install
npm install testcafe –save-dev

How it works

Cypress works by controlling the browser via proprietary automation APIs and needs a new driver for every supported browser.

Cypress supports Chrome and family (Chromium, Electron), Firefox is still under development.

Cypress runs your actual test code in the browser process and communicates with the app via HTTP or executing shell commands.

Cypress uses jQuery selectors, also can use the useful extra capabilities like :parent and :first.

Cypress goes one further by having a dedicated Electron app that shows your tests side by side with the site under test. Hovering over a test step shows a snapshot of the DOM for that step which makes debugging easier.

Cypress uses (a fork of) Mocha as its test runner with Chai for assertions and Sinon for mocking.

Advantages

  • good documentation
  • fast & reliable
  • jQuery selectors (extra capabilities like :parent and :first)
  • synchronization done by the framework
  • Live reload/retest
  • Easy debugging in the CypressIO UI
  • JS errors caught by the framework
  • Screenshots & Video recording
  • possibility to go back to previous states
  • open source (MIT licensed)

Disadvantages

  • parallel execution not supported
  • no cross browser support: only supports Electron and Chrome at the moment
  • no integration with BrowserStack or SauceLabs
  • error reporting need improvements

Overall, TestCafe and Cypress, are both good options to go forward in your organisation.

Conclusions

TestCafe offers a more similar approach to pure JavaScript, where you get the values from a page and then you assert that those values are correct, works seamlessly with async/awaits.

More details on how to publish TestCafe reports in Jenkins.

Cypress, on the other hand, offers a more user oriented approach, when you select the element you want to interact with and you have to do the assertion on the spot, this approach can be a little cumbersome at the beginning.