What is the Document Object Model (DOM)?

Automated Website Testing & Monitoring Test Automation UI Testing

1 minute read

The Document Object Model (DOM) is an object-oriented representation of the web page, representing the document as nodes and objects (HTML tags), which can be modified with a scripting language.

DOM is a programming API for HTML and XML documents.

The DOM is created when the webpage loads inside the browsers, HTML you write is parsed by the browser and turned into the DOM.

If you View Source the web page, the content may and most certainly will be different from DOM’s content. Programming languages, like Javascript, connect to the page and can dynamically change the content of the DOM.

If you open Dev Tools in any browser, you can see a live representation of the DOM and in most simple cases, the visual representation of the DOM will be just like your simple HTML, but remember that JavaScript can manipulate the DOM (dynamically adding content to your web page through AJAX calls).

So, if you are using Ajax to get content from elsewhere, the DOM is going to be very different than your original HTML, similar happens with client side templating.

How to Design your Load Testing Scenarios

Test Automation

3 minutes read

So you’ve run your first free load test with LoadFocus. What’s next?

Load Testing Goal

The main goal of load testing is to see whether the application can sustain the increased load on the server or will it crash the server. Your applocation can be a website, some API or web serivices you use or expose to customers, a wordpress blog or any other public URL that you expose. Also, to identify areas in the architecture of your application which don’t function properly, either too slow or not functioning at all.

Load Testing would provide data for rendering or doing different actions on the website with a number of concurrent users and still have a good performance.

Prerequisites

There are a few prerequisites that you need to gather in order to run a successful load test assessment.
Enter you Analytics tool and gather the top 3 locations from where your customers access your website or web services.

Load Test Locations supported:

  • US East (Virginia)
  • US West (North California)
  • EU West (Ireland)
  • EU Central (Frankfurt)
  • Asia Pacific (Singapore)
  • Asia Pacific (Mumbai)

Also, find out how many users accessed your application per second.

Define supported councurrent users/second, expected response time and any other client side (lantency, hits/second) or server side (CPU, Memory etc) performance metrics you want to consider.

Make sure the load tested URL is up and publicly available before running any load or performance tests
Check the HTTP method for your tests (GET is the request done by browsers when accessing a website or an API endpoint) and protocol (HTTP vs. HTTPS).

Have in mind that this number may change in the future, when you send a big email campaign or post a new viral article on your blog. So you need to be prepared to handle this new load in order not to lose potential customer or get SEO downgrded, because of your slow website (system under test).

You need to determine what good performance means for your System under Test, because the system under test will start throwing errors and maybe start crashing under a heavy load of actions/concurrent users

Load Test Scenarios

And create the proper load testing scenarios to simulate hits from your customers’ locations.

  • Start with a small number of clients (1, 20, 50, 100 concurrent users / second). Try to increase the number of the clients gradually to understand how your API, Website or WebApp behaves.
  • Run GET requests on your main website pages (top 5 web pages)
  • Identify and run API Login request (usually these are POST requests made with a POST Body to an API endpoint)
  • Make GET or POST requests with an authenticated or non-authenticated user
  • Monitor for each test:

Next Steps

Load testing is an iterative process. Once you find one issue, you need to re-run the load test and find the next!

Run your free load test today!

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.

More resources can be found here:

Top 15 reasons why load testing is important to your website
Load Testing for RESTful APIs in the Cloud

Free Load Testing Tool from LoadFocus

Cloud Services Load Testing Performance Testing Stress Testing

1 minute read

With the free load testing tool, you can run a free load test for your website or API straight from the browser, without any account needed. The load test scenario is hardcoded to the following:

  • load tests will run with 1 parallel user
  • load tests will run for 10 seconds
  • load tests will run from US East (Northern Virginia) location
  • load tests results will be publicly available.

In order to understand better how your websites or APIs behave under more load, you can create an account by clicking here, and create different load testing scenarios with up to 1000 concurrent users, from multiple locations, for up to 10 minutes per test.

Identifying potential issues, when multiple users access your websites or web services at the same time, is very beneficial and helps conversion rates.

Give it a try and run a free load test today!

 

How to Load Test My Website?

Load Testing Performance Testing Stress Testing

1 minute read

LoadFocus – is a easy to use cloud testing tool, and you don’t need any setup, it runs from the browser. It helps you understand better your Website’s and WebServices’ performance and find potential bottleneck before your customers do. Run a free website speed test today.

Here you can find more details on the load testing features: https://loadfocus.com/load-testing

Just create an account, it’s free for the first 14 days: https://loadfocus.com/pricing-and-plans

Here is everything you need to know about load testing:

Load Testing with up to 600k clients/test from multiple world regions and you can simulate load test scenarios no matter how complex your tests are.

Get started now

 

LoadFocus – is a easy to use cloud testing tool, and you don’t need any setup, it runs from the browser. It helps you understand better your Website’s and WebServices’ performance and find potential bottleneck before your customers do. Run a free website speed test today.

What is a Staging Environment in Software Development?

Product Development Test Automation UI Testing Web Testing Books

3 minutes read

LoadFocus – is a easy to use cloud testing tool, and you don’t need any setup, it runs from the browser. It helps you understand better your Website’s and WebServices’ performance and find potential bottleneck before your customers do. Run a free website speed test today.

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.

 

LoadFocus – is a easy to use cloud testing tool, and you don’t need any setup, it runs from the browser. It helps you understand better your Website’s and WebServices’ performance and find potential bottleneck before your customers do. Run a free website speed test today.

 

How to Visually Compare Staging vs. Production Websites Automatically

Mobile Testing Test Automation UI Testing

2 minutes read

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.

Visual UI Regression Testing with Jest, Puppeteer and Headless Chrome

Test Automation UI Testing

2 minutes read

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.