Front-end integration testing

Question

I'm looking into doing some front-end integration testing and getting a little stuck on this. I know how to do javascript unit tests, but I'm not really getting the idea of front-end testing.

Some scenarios I would like to test:

• After page load, can I check if a specific div is filled with content
• After clicking a button, a popup should show up, is this possible to test
• Does a div has specific HTML applied to it?

What would be the best tools to use? And how would I go ahead with this?

Answer 1

I also would recommend e2e tests to check if your website and especially your javascript behaves like you'ld expect. There are a bunch of libraries you can use to do Webdriver tests in Javascript. Check out this stackoverflow thread: Headless Browser and scraping - solutions.

For instance in WebdriverJS you can easily chain several commands to navigate in the browser and get informations to test against. One of your scenarios could look like this (using Mocha):

describe("check if overlay pops up", function() {
  it("opens success overlay when I click on submit", function(done) {
    browser
      // show overlay
      .click(".btn_submit")
      .isVisible("#overlay", function(err,overlayIsOpen) {
        assert(err === null);
        assert(overlayIsOpen === true);
      })
      // hide overlay
      .click(".btn_ok")
      .isVisible("#overlay", function(err,overlayIsOpen) {
        assert(err === null);
        assert(overlayIsOpen === false);
      })
      .call(done)
  });

  // other tests
})

You will find a lot of other commands and examples on the project website. You can run these tests on several browser like Chrome, Firefox or even on mobile devices. Other popular libraries like Wd.js or Selenium-Webdriver are promise based and do more or less the same.

Answer 2

I highly recommend the use of cypress for front-end integration testing. The corresponding utility uses mocha-chai test suite to create and evaluate test cases on a web-page in a very easy and straight-forward way. Moreover, you may execute your tests from a command-line or a GUI where a video is been displayed and it can also record each of the tests. Here is a small sample:

describe('Test myProjects input fields', function () {
beforeEach(() => {
    cy.visit('https://webpage.link/go/alink')
})

it('fills Project form', () => {
    cy.contains('Where is your item located?')

    cy.get('myelement-component-autocomplete[myelement="myProject/Home/hotelName"]').within(() => {
        cy.get('input').type('Hilton')
    })

    cy.get('myelement-component-datetime[myelement="myProject/Home/departureDate"]').within(() => {
        cy.get('input').type('2/4/2019')
    })
})
}

Later on, you can add it in your projects CI pipeline and every time you push changes the front-end test will be evaluated too.

Answer 3

The two tools that I use for these purposes are PhantomJS + Mocha, or Selenium Webdriver.

If you want to test what actual users will see I would use Webdriver. PhantomJS is a headless browser. Webdriver actually drives a real browser (Chrome, Firefox etc).

A code example, using Python

from selenium import webdriver

browser = webdriver.Chrome()
# at this point a chrome window will open
browser.get('http://example.com')

div = browser.find_element_by_css_selector('div.my-class')

assert div.text == 'The content I want to be there'

I see there are also JavaScript bindings now (of course). This page provides a good overview of getting everyhing installed: https://code.google.com/p/selenium/wiki/WebDriverJs