Test Automation

3 minutes read
The Ultimate Cypress Testing Hands-on Guide Course
The Ultimate Cypress Testing Hands-on Guide Course

Cypress is one of the best web testing frameworks created so far.

With more and more new web development frameworks on the market, it’s harder and harder to find an end to end testing or integration testing framework that would work well in any situation.

In the recent years, we’ve seen a spike in web development frameworks, from Angular 1 or Angular 2, to the more popular React and VueJs, to new one like Svelte, and less popular like EmberJs and BackboneJs.

What do all these frameworks have in common? They are written in JavaScript, more recently most of the started supporting type-checking through TypeScript.

All along, developers and especially testing engineers, have been looking for web testing framework to satisfy their needs for their web application. Some of the options that I’ve personally tried are Selenium with WebDriver, Puppeteer, TestCafe and Cypress.

Most of these frameworks come with out of the box click and record functionality, which allows you to get started in a matter of minutes and create your first end to end test with assertions in no time.

Check the following video screencasts courses on how to get started with Cypress, TestCafe or Selenium WebDriver:

However, these click and record tools are nice and fun to work with, but long term, personally, I prefer writing tests on my own in an IDE, coding for complex test scenarios.

Let’s try to understand a more complex scenario. Suppose we need to test the “Change Password” functionality, inside our own application (authentication required), which is a very common scenario.

Our test will need to:

  • make an API call to get an Auth token (JSON Web Token) with a predefined user
  • add the token to the current session’s cookies (or local storage)
  • open the Change Password page
  • successfully change the password
  • check that your current session is not valid any more (session invalidation works as expected)
  • check that the new password works as expected (through API and/or Login Page)
  • check that the old password is not valid any more

This is a typical scenario where using a click and record tool might not be as useful, since you need to be able to store multiple account types for login, make the API call to login (you could use the UI, but this might be slower), store the auth token in the current session, the do the actual test and make all further assertions.

For this type of scenario, personally I would choose from two web testing frameworks: Cypress and TestCafe, they both come with pros and cons, please see full list here.

With Cypress, you can better mimic the UI interaction from a user’s perspective, whereas TestCafe has a similar JavaScript flow, where you extract the values you want to assert and can run assertions and manipulate data better with asyncs/awaits.

Since Cypress comes with a different approach on how write end to end and integration tests, I would say Cypress has a higher learning curve comparing to TestCafe.

It’s up to you which frameworks you decide to use, to better fit your needs and your team skills. Hope these frameworks will continue to evolve and make it easier and less error prone to write new tests and deliver high quality applications to end user with less and less critical issues.

Written by Bogdan Vazzolla.

LoadFocus is cloud Performance, load and stress testing tool which provides the infrastructure and the ability to run all these tests in less than a few minutes, keep history of the results, compare different runs to inspect performance improvements or performance degradation.

Test Automation

1 minute read

Nowadays, in the era of instant gratification, when everyone want everything in a matter of moments, understanding the performance of your website, web application, web service is more important than has ever been.

Monitor Web Performance With Lighthouse as a service
Performance Metrics from KissFront

Using web performance tools to understand how your application behaves is easy and a best practice that you should follow on a daily basis.

There are multiple things that you need to consider when you assess the overall performance of your app, and it’s not all about performance metrics and speed. You need to take into account accessibility, SEO, mobile usability and others.

There are tools, like KissFront.com which can help you run performance assessments on an hourly basis, check screenshots on loading behaviour of your app, SEO, accessibility and other important metrics.

Have a look at this example.

First Meaningful Paint
Speed Monitoring from KissFront

Start now to Monitor Your Website Performance With Lighthouse as a service from KissFront. Here are just a few benefits:

  • Get insights with modern metrics from Lighthouse.
  • Test your website every hour.
  • No coding & no configuration required.
  • Compare with previous runs or competitors.

Test Automation

2 minutes read

Selenium IDE is an open source record and playback tool used. Easy to use and fast in generating UI functional test cases.

selenium ide

End to End testing is quite fast when you create tests from the Selenium IDE Chrome Extension or Firefox Add-on.

Debugging tests, setting breakpoints, running an UI test to a specific test step work out of the box the new version of Selenium IDE.

Test suites are available in order to group previously generated test cases, and exporting your test cases is a click of a button away.

Concurrent execution of test cases is available from the command-line (terminal) and which lowers your execution time.

Multiple selector fallback happens automatically, basically when you click and record a test case and interact with an element, Selenium IDE generated 3-5 fallback selectors, so that in case first selector fails, Selenium IDE automatically verifies the other selectors before failing the test step.

selenium ide

You can have a look in more depth with the new Selenium IDE course created Understand Selenium IDE Test Automation Tool #seleniumide course

selenium ide course
Selenium IDE Video Course

Test Automation

2 minutes read

TestCafe is a Node.js tool to automate end-to-end web testing.

testcafe

What are End to End tests and why are they important?

End to End tests cover real journeys that your customers do, they are slower to execute but can be much more valuable comparing to unit and integration tests.

E2E testing cons:

  • slow and non-consistently passing tests
  • long configuration time
  • too long execution time – much longer than unit tests
  • debugging time is too high

What is TestCafe? History of TestCafe and how does it work?

TestCafe is a Node.js tool to automate end-to-end web testing and functional testing.

TestCafe uses a URL-rewriting proxy called Hammerhead that emulates commands using the DOM API and injects JavaScript into the browser.

TestCafe supports multiple browsers without any browser drivers.

It runs every single test in its own isolated test environment to simulate new sessions.

Each test has finished being executed, it will lose the state (cookies, local storage etc) of the page and start from the beginning again.

Main TestCafe features:

  • Cross-browser testing
  • Open source
  • Easy setup/installation
  • UI End to End Tests
  • Builtin waits
  • Retry assertions
  • Uses standard CSS selectors to locate elements
  • Live Testing with TestCafe Live
  • Remote browser/mobile testing: run tests in any browser (including mobile devices and cloud services)
  • No complex configuration required
  • Can control the speed at which tests are run
  • Concurrency: run multiple tests with same or different browsers at the same time
  • CI/CD integration
  • Screenshots testing
  • Supports TypeScript

Example of Test in TestCafe:


import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // Test code
});

More details on How to Build an End to End Software Testing Framework with TestCafe in our Coursinator course.

More details on How to Build an End to End Software Testing Framework with TestCafe in our Coursinator course.

TestCafe Course

Cypress is one of the alternatives to TestCafe. More details on Cypress is available in the video screencast The Ultimate Cypress Testing Hands-on Guide Course

Test Automation

1 minute read

KissFront uses Google Lighthouse as a Service for continuous modern performance audits.

KissFront’s Chrome Extension for Google Lighthouse is live now. This will enable easier view of the modern performance metrics like Performance Score, First Meaningful Paint, First Contentful Paint, Speed Index and others.

Monitor your website

Your website gets monitored every hour, and you can use this new extension to monitor your website performance, and understand how is your website’s performance changing over time..

More details on how easily is to run a test with KissFront and Google Lighthouse.

Get Started Now

Page Load Time Performance Testing Website Speed Testing

2 minutes readKissFront is a web performance monitoring tool running Lighthouse continuously or on-demand (using Lighthouse as a service) to monitor your website performance and get insights on speed with modern performance metrics.

Lighthouse is an open-source automated tool for analysing and improving the quality of web pages with audits for performance, accessibility, progressive web apps, SEO and best practices.

KissFront.com uses Lighthouse as a Service to provide regression testing for developers and product people

Each time Lighthouse audit generates a comprehensive report that gives information on all of the tests that passed in addition to the ones that failed. Also it includes the ability to test progressive web applications for compliance with standards and best practices.

lighthouse metrics results

KissFront uses Lighthouse audits and it provides five categories of feedback, ranking from zero to 100. Lighthouse Audit references: Performance, Progressive Web App, Accessibility, Best Practices, SEO.

  • Performance: Modern metrics on how fast your website loads and how key elements become available to your customers – First Contentful Paint, First Meaningful Paint, Speed Index etc.
  • Progressive Web App: checks your site’s level of completeness, which improves mobile performance and may increase search engine rankings.
  • Accessibility: checks 35 accessibility traits, one of the most important things you can monitor, also you are legally obliged to provide an accessible website.
  • Best Practices: checks the use web development best practices, like HTTP/2.
  • SEO: less thorough than some third-party SEO audit tools, it can still help your business get an idea of how it will perform in search engines.

lighthouse report

Choose the Lighthouse usage

  • Use KissFront for Lighthouse as a service
  • Chrome DevTools
  • Command line (via shell scripts)
  • As Node module npm install -g lighthouse To run an audit: lighthouse To see audit options: lighthouse –help

KissFront.com Helps Improving Your Overall Website Experience. Easily store and share results with your team.

lighthouse multiple runs

KissFront gives you the ability to monitor all the metrics from above over a period of time during deployments and high load. Also gives you the ability to monitor not only your website but you competitors web sites.

Modern Performance Metrics Page Load Time Test Automation

1 minute readTime to First Meaningful Paint (TTFMT) is a modern performance metric introduced by few engineers from Google, and is the time to paint the main content that users are interested in, so the thing the users came here for.

Rendering some background color can be much easier and faster, but that’s definitely not what the users was looking for when they entered your website.

In order to identify the main content of the page, we define these primary elements as Hero Elements, but for now there is not a clear way for us to get paint times of specific elements of the DOM (Document Object Model).

first meaningful paint

No browsers exposes this metric at the moment, but it seems to get big traction. You can inspect the First Contentful Paint (FCP) and First Meaningful Paint (FMP) with KissFront, which allows easy monitoring and modern metrics inspection.

First Meaningful Paint can be also defined as the paint after which the biggest layout change has happened.