'How do I add and use Chrome Extensions with Cypress.io?

I'm currently dealing with a an X-Frame-Options issue being blocked when running my Cypress.io tests. I cannot change the server setup to modify the X-Frame settings. Somebody mentioned to me that I should try a chrome extension called "Ignore X-Frame headers."

I have the extension installed on my non-Cypress Chrome, but how do I install it for use in my Cypress.io tests? If I go into developer tools while running a Cypress test, I can see that no extensions are loaded for Cypress/Chrome.

Any ideas on how or IF I can do this? I'm using a Mac.

google-chrome-extension cypress

Solution 1:^[1]

You could try to install the extension through Cypress chrome (and enable it).

Solution 2:^[2]

You can use the before:browser:launch event to load a Chrome extension.

More information on how to use this event here.

Solution 3:^[3]

For those wondering what the link is to that extension is:

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

paste that link into the chrome window Cypress is running in and install it then try to re-load your test. :)

Solution 4:^[4]

const path = require("path")
module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    // supply the absolute path to an unpacked extension's folder
    // NOTE: extensions cannot be loaded in headless Chrome
    launchOptions.extensions.push(path.resolve(__dirname,"../../extension_name"))

    return launchOptions
  })

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ascripter
Solution 2	Diogo Rocha
Solution 3	HyeEun
Solution 4	AnirbanD

'How do I add and use Chrome Extensions with Cypress.io?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]