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.