Filed under Product Development, Test Automation, UI Testing, Web Testing Books.

The Staging Environment is a complete copy of the production environment (hardware and software), independent and similar in terms of location, database load with the production etc which makes it possible to test accurately and define important standards in order to release new features in production with a high level of confidence and no major impact to customers.

For most of the companies, three environments are common:

  1. development (or local)
  2. staging (or pre production)
  3. production (or live)

1. Development environment

This represents the working local code where changes made by developers are deployed here, so integration and features can be tested.

This environment is updated on a daily basis and contains the most recent version of the application.

2. Staging environment

This usually contains the RC (release candidate) version of you code, and this environment is normally a similar to the production environment.

The staging environment has the following characteristics:

  • contains the next version of the application
  • is used for final integration testing between different services
  • is used for load and performance testing, stress testing and memory-leak testing of the integrated services
  • is used for demo purposes as it contains similar data with the production (live) environment
  • is used for client/manager approvals before going live

Website speed testing can be executed in the staging environment in order to check page speed improvements or degradation.

3. Production environment

This is the newly released version of the application, accessible to the client/end users.

This version does not change except for during scheduled releases. It may contain different features, turned On/Off based on different segmentation options.

May contain A/B tests where two users may see different data, or different workflows based on random segmentation or location based segmentation.

Visual comparison between the staging and production environments for different pages may be achieved with our visual regression testing service.

Why is a staging environment so important?

Having a staging environment is important because it allows to test bug fixes, new features and other product improvements in an environment similar to the one the customers are facing.

Testing on development, local or a QA environments may be faster, but since is not identical with the production environment, may hide important issues, such as potential functional bugs, performance bottlenecks and important security bugs.

The development or the test environment doesn’t have exactly what the production environment does. The database is usually not the same, the latency may be different which may cause releasing critical defects to customers because they’re not testing in a real-world environment.

Devs and QA engineers tweak the dev and test environments to simulate the production environment, but usually simulating the production environment is not the same with have a staging (pre production) environment where hardware and software is similar to production.

Challenges for Staging Environments

Staging environments may be expensive, difficult to get accurate data from, and hard to maintain. Not having a staging environment may involve taking additional risk and you may end up impacting your current and future customers. This may lead to a bigger cost than owning, maintaining and testing on such a environment.

Do you have multiple services that are developed independently, and you need to make sure that they integrate correctly, as per the previously defined contract? Then a staging environment can provide that End to End level of testing, which will be helpful to release with more confidence in terms of service integration.

Are you able to test everything in production and avoid the cost and time for creating such an environment? Most likely not, depends again on the risks and the ability to turn ON/OFF features in production environment, show them only to a percentage of customers, and hiding the very fast in case something goes awfully wrong.

 

 

Filed under 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.

Filed under 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.

Filed under 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. 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.

 

Filed under 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:

Filed under 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:

 

 

Filed under 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.