Mobile Testing Test Automation UI Testing

With LoadFocus you can visually compare your staging website with your production website automatically, following these steps below:

Steps to dynamically compare Staging vs. Production websites:

  • Enter your Staging Website (i.e. https://loadfocus-staging.com)
  • Enter your Production or Live Website (i.e. https://loadfocus.com)
  • Click Discover button and choose the number of URLs to automatically get discovered from your Production website
  • Start your Visual Comparison Test
  • Inspect generated images and the diff image of the two websites

This will generate a screenshot for each version of your website, Staging and Production, based on the Staging URL + Pathname or Production URL + Pathname and compare the screenshots.

You can choose the threshold which will ignore the percentage of different pixels between the two screenshots generate for each page. You can generate screenshots on different responsive sizes or emulate on mobile devices.

More details on our Visual Regression Testing service webpage.

Test Automation UI Testing

Jest is a complete and easy to set-up JavaScript testing solution which also provide a Snapshot Testing built-in mechanism.

With the Snapshot Testing functionality you can capture snapshots of React trees or other serializable values to simplify testing and to analyze how state changes over time.

In this article we are going to take advantage of Jest functionality to take screenshots of web pages using Puppeteer and compare generated screenshots with screenshots baseline in order to find regressions in the UI of any web page.

Jest is very easy to use with Puppeteer due to its Global Setup/Teardown and Async Test Environment APIs. More details on using Puppeteer to do visual regression testing can be found here.

With Puppeteer you can choose whether to launch Chromium in headless mode or not (tests run faster in headless mode, but it’s useful to be able to see the browser and run the test in slow motion for debugging purposes).

Prerequisites for your test to be able to run Jest tests with Puppeteer in order to take and compare screenshots of your web pages:

npm install --save-dev jest jest-cli
npm install --save-dev puppeteer
npm i --save-dev jest-image-snapshot

Here is an example on how to use Jest Image Snapshot:

  • Extend Jest’s expect assertion mechanism:

Example: Jest screenshot test

const { toMatchImageSnapshot } = require('jest-image-snapshot');

expect.extend({ toMatchImageSnapshot });

Example: Jest screenshot test with Puppeteer and Jest Image Snapshot with Headless Chrome


export const browserConfig = {
  ignoreHTTPSErrors: true,
  headless: true,
  args: ['--no-sandbox', '--disable-setuid-sandbox'],
};

// jest-image-snapshot custom configuration in order to save screenshots and compare the with the baseline
export function setConfig (filename) {
  return {
    failureThreshold: '0.01',
    failureThresholdType: 'percent',
    customSnapshotsDir: `${__dirname}/../snapshots/`,
    customSnapshotIdentifier: filename,
    noColors: true
  }
}

describe('screenshot', () => {
  let browser;

  beforeAll(async () => {
    // start Puppeteer with a custom configuration, see above the setup
    browser = await puppeteer.launch(browserConfig);
  });

  it('dummy application page', async () => {
    const page = await browser.newPage();

    expect.extend({ toMatchImageSnapshot });
    await page.goto('http://localhost:3000');
    await page.setViewport({ width: 1280, height: 1400 });

    const image = await page.screenshot({ fullPage: true });
    expect(image).toMatchImageSnapshot(setConfig('image-name'));
  }, 15000);

  afterAll(async () => {
    await browser.close();
  });
});

Also, you can automate your visual regression testing by using our built-in visual regression testing service.

Test Automation

LoadFocus is a cloud testing platform. With LoadFocus you can check your website/API performance, inspect mobile rendering, compare versions of your website and much more.

Load Testing by LoadFocus

Let’s say you have an email campaign planned for thousands of subscribers and you want to check how your website/blog is going to behave when tens or hundreds of users are going to hit your website every second.

With LoadFocus you can mimic this behaviour with our Load Testing service, you can simulate load on your website or APIs with 1000 concurrent users per second or 600k requests per test. You can select from 6 different world test locations, so your load test scenario can be very realistic. Here are some more articles to get you start with running your first load test and understand performance and load testing metrics better:

The above Load Testing related articles will get you up to speed with Load Testing, as a best practice in software development, reasons why is good to load test your application, website or web services, and how to understand better your load test results. Here is another article on how to load test my website.

For more articles related to load testing, please check our blog.

 

Website Speed Testing by LoadFocus

How fast your website loads can affect customer conversion rate. There are improvements that you can do in order to make your web pages load faster.

Response time, Latency, Performance score, Minifying Assets (JS, CSS, HTML), Optimising Images, CDN for Multiple Locations and others may improve your page load and increase your customer conversion rate, below is a list of related website speed testing articles:

Run a free website speed test for your website.

 

Cloud Services Load Testing Performance Testing Stress Testing Test Automation

Load Testing your cryptocurrency exchange service is very easy with the Cloud Load Testing Tool provided by LoadFocus.

You can easily simulate exchange transactions by calling your API endpoints within our load testing tool. It can simulate up to 600k requests per each load test.

Load tests run in real-time and you can inspect multiple performance metrics like: response time, latency time, requests per second, throughput per second, and identify potential errors and bottlenecks that may impact your customers. Here you can better understand errors and response codes.

Also, multiple cloud locations are available so you can simulate traffic from different part of the world.

To provide a faster web interface, you can run a free website speed test and discover potential speed improvements for your Cryptocurrency Exchange Service.

For more details on how to get started here click here.

 

LoadFocus is a cloud testing platform for:

Page Load Time Test Automation

We’ve introduced an easy way to find which technologies are used by the website under test, in case you have ever wondered on how to find what technology is behind the particular website.

In order to find out what technology is used by a website, just scroll on the results page to check the Built With Technology section. It detects CMS, CRM, , E-Commerce platforms, web frameworks, server software, analytics tools and others. All you have to do is to put website name and then it shows all the information related to website.

Here is an example of a test, and now it’s also part of our Free Website Speed Test.

This will help you better understand by your website loads slower than expected, and find out what other website are using in terms of the scripts and technologies behind that website, and find out more information about competitors.

 

 

LoadFocus is a cloud testing platform for:

 

 

Test Automation UI Testing

Here is the list with some of the most popular visual comparison tools for discovering UI design issues:

LoadFocus Visual Regression Testing – AUTOMATED VISUAL REGRESSION TOOL for Websites and UI Designs

BackstopJS – BackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.

Wraith – A responsive screenshot comparison tool

PhantomCSS – Visual/CSS regression testing with PhantomJS

CasperJS – Navigation scripting and testing utility for PhantomJS and SlimerJS http://casperjs.org/

Spectre – A simple UI for browsing and inspecting diffs, and an API for runner scripts to submit screenshots to and receive a pass or fail in real time. (For use with Wraith, Backstop, Selenium etc)

VisualReview – VisualReview, a human-friendly tool for testing and reviewing visual regressions.

Gemini – Gemini is a utility for regression testing the visual appearance of web pages.

WebdriverCSS – Regression testing tool for WebdriverIO

Kobold – Visual regression testing framework, comparing screenshots from multiple builds

LoadFocus is a cloud testing platform for Load Testing, Website Speed Testing, Mobile Testing, Automated Website Testing and Visual Regression Testing.

Integrations Mobile Testing Test Automation UI Testing

Visual Regression Testing tool from LoadFocus allows to compare two version of your website in just seconds. Let’s say that you have two environments for your website, Staging and Production, and you want to make sure that any visual change you made on the Staging version is expected and now other changes/bugs are going to be introduced.

With Visual Regression Testing tool you can create a test where you define the two versions of your website, with every webpage that you want to run the screenshot comparison test.

Here are the steps how you can compare two versions of your website in seconds, have the test saved in LoadFocus Platform.

LoadFocus is a cloud testing platform for Load Testing, Website Speed Testing, Mobile Testing, Automated Website Testing and Visual Regression Testing.