5

I am introducing myself to devops engineering and I'm stuck on "how to automate testing for web applications". I consider that backend and api test automation are relatively simple and the concept is clear, but I don't understand the QA principles and tools behind front-end test automation specially when using the latest FE technologies (angular, react, meteor, ember, etc...).

Do you really automate the front-end testing?
Does the tool depends of the technology/framework? I've heard about automating at the "controller level" does that mean that you should only test where are you routed inside the web app?

Would you recommend a tool for it having CI in mind?

2 Answers 2

2

Front end testing is important and is often part of User Acceptance testing.

Popular approaches uses Selenium along with a programming language - Java, Ruby, Python or C#

Update (2023) There are now new options for web page automation that don't use selenium but do use a more modern approach to the framework. They are Cypress and Playwright. They are referred to as 'javascript engine' testing frameworks, but don't be mislead by the name, these are web page html testing frameworks. Cypress is my favorite and comes with a modern ecosystem that makes going back to Selenium unlikely for me

The basic principle is that you create an instance of a Selenium object called 'WebDriver' that represents the instance of use of a specific browser, for example chromedriver for chrome.

You then write tests using this infrastructure. You refer to web page elements, you 'click' on links and buttons, you type text in input fields, you submit forms, etc. Basically if a user can do it, you can usually replicate that behaviour using selenium commands through the selected language and framework. In some cases is is done through a test framework tool, for example for Ruby on Rails (Application Framework), using RSpec (Test Framework) and Capybara (Selenium API)

One of hardest parts is certainly javascript and ajax testing.

Generally the approach here is:

  1. Make sure selenium tests have good waiting strategies to allow for ajax and javascript

  2. Write unit level tests in a javascript testing framework. This can either be a specific test framework used by the javascript framework being used or a more general one that can be used with various javascript frameworks. A good example of the latter is Jasmine. Jasmine tests will likely mock out the actual web page with a fragment specifically for testing. This is a big part of what makes them unit tests and not user acceptance tests.

Front end tests are the focus of my job. I actually find them a lot easier to write than model or controller tests! I do use practices like Page Objects to make sure the tests stay readable and maintainable.

As for 'automating at the controller level only' I think that might have been part of a bigger statement with more context. You should consider testing at model, controller and view levels for unit, integrated and user-acceptance testing using happy, sad and optional workflows.

3
  • 1
    This was an amazing answer. Using selenium/jasmine could be considered end to end testing? and have you worked in a continuous integration context? are these tests part of the strategies for CI/CD in your experience?
    – Juan
    Mar 11, 2017 at 17:20
  • Yes I consider selenium end to end testing because everything - the web server, the database, the application server, the browser and the representation of the user clicking and typing - are all involved and being tested. I currently and previously work with CI environments. Previously with Jenkins (yuch!) and currently with CircleCI (yeah!, my recommendation for a CI tool). These tests do run as part of our CI build for every pushed commit. When we need to test against other browsers or devices we add on a provider like SauceLabs or Browserstack to provide the infrastructure for that. Mar 11, 2017 at 17:41
  • However I would consider Jasmine to not be end-to-end testing. If you stub out the HTML fragment it is unit testing. The only thing you are actually testing at that point is the javascript code. Mar 11, 2017 at 17:45
0

Use Cypress

With Cypress, you can easily create tests for your modern web applications, debug them visually, and automatically run them in your continuous integration builds.

https://www.cypress.io/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.