How to disable image loading in Cypress
Disabling image loading in test automation can bring numerous benefits including faster test execution, improved stability, reduced flakiness, and reduced network usage.
It can save time by skipping the lengthy process of downloading and rendering images, resulting in faster test execution. This is especially beneficial for large test suites or when running tests in a CI/CD environment where speed is crucial.
By disabling image loading, you can also eliminate a potential source of flakiness in tests. Images sometimes fail to load due to network issues or other factors, which can cause unexpected test failures. By disabling image loading, you can improve the reliability of your automated tests.
Apart from the above factors, disabling image loading can also enhance the stability and consistency of your tests by reducing network problems that can cause tests to fail or produce unexpected results.
One of the ways to disable image loading for Chromium-based browsers is to add imagesEnabled=false
flag.
In Cypress, it can be achieved by adding the following configuration in Cypress.config.js (Cypress version 10 and above)
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on) {
on('before:browser:launch', (browser = {}, launchOptions) => {
if (browser.family === 'chromium' && browser.name !== 'electron') {
launchOptions.args.push('--blink-settings=imagesEnabled=false')
return launchOptions
}
})
},
},
});
Code Walkthrough:
The above code modifies the launch options of Chromium-based browsers (excluding Electron) by disabling image loading (by changing the argument) for potential performance benefits during testing. It is
on('before:browser:launch', ...)
registers a callback function to be executed before launching the browser.- There are 2 parameters passed in the callback function:
browser
=>It contains information about the browser being launched (e.g. family
, name
, version
)
launchOptions
=> It is an object containing various options that can be passed to the browser when launching it.
3. The if
statement checks whether the browser being launched is a Chromium-based browser (i.e. browser.family === 'chromium'
) and is not Electron (i.e. browser.name !== 'electron'
). If both conditions are met, the code inside the if
block is executed.
4. launchOptions.args.push('--blink-settings=imagesEnabled=false')
adds the command line argument --blink-settings=imagesEnabled=false
to the args
array of launchOptions
. This argument disables image loading in the browser.
5. The modified launchOptions
object is returned from the callback function. This tells Cypress to use the modified options when launching the browser.
Let’s write a test case and verify the execution:
describe("Block Image loading in Cypress", () => {
it("Open Amazon and disable image load", () => {
cy.visit("https://www.amazon.com");
});
})
Launch Cypress by running the command: npx cypress open and Select Chrome browser.
You will observe, the images on the website will not load because of the configuration change we made in the above steps.
This way, you can block image loading in Cypress for Chromium-based browsers.
Conclusion:
In this blog, we learnt how to disable image load in Cypress for Chromium-based browsers. Disabling the loading of images in Cypress can significantly improve test performance by reducing the amount of data that needs to be transferred during test execution. This can be especially helpful in scenarios where images are not critical to the functionality being tested.
Thanks for reading. Happy Learning! — AB
Ref : Naveen AutomationLabs (https://youtu.be/TO7i6xlMBHU)
Thanks, Naveen AutomationLabs for creating a detailed video on the topic and for your guidance.