args.findIndex is not a function

[sir-dunxalot]

After installing this addon in a new Cypress test suite, I see the following error when opening a test in the browser:

Stack trace:

TypeError: args.findIndex is not a function
    at /Users/YYY/Codebases/XXX/node_modules/cypress-browser-extension-plugin/loader.js:155:41
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

This error is caused by the following code:

// app/cypress/support/index.js
const extensionLoader = require('cypress-browser-extension-plugin/loader');

module.exports = (on, config) => {
  on('before:browser:launch', extensionLoader.load({
    source: '/Users/YYY/Codebases/XXX/build',
    skipHooks: false,
    validBrowser: ['chrome'],
    watch: true,
  }));
};

Simplifying the implementation to the example shown in the Regular Usage section of the Readme does not change anything.

// app/cypress/support/index.js
const extensionLoader = require('cypress-browser-extension-plugin/loader');

module.exports = (on, config) => {
  on('before:browser:launch', extensionLoader.load('/Users/YYY/Codebases/XXX/build'));
});

[sir-dunxalot]

I should also specify my deps:

"cypress": "^4.6.0",
"cypress-browser-extension-plugin": "^0.1.0",

This is my current workaround (doesn't use this lib):

const path = require('path');

module.exports = (on, config) => {
  on('before:browser:launch', async (browser, launchOptions) => {

    if (browser.family === 'chromium' && browser.name !== 'electron') {
      const extensionPath = path.resolve(__dirname, '../', '../', 'build'); // The folder where I build the unpacked extension

      launchOptions.extensions.push(extensionPath);
    }

    return launchOptions;
  });
};

[evandavis]

I think it's because this package assumes that you have your scripts injected declaratively via content_scripts in the manifest. If your content script is injected programmatically (or if you don't have one) I think this error pops up.

[Strajk]

@sir-dunxalot @evandavis fixed here #7

If you need it working now, you can use fixed version in package.json like this:

"cypress-browser-extension-plugin": "Strajk/cypress-browser-extension-plugin#15f14eaad4c0602339ddd67aafd9ec9d9145936b",

[hitmands]

I'd like to get #7 merged if possible.

[hitmands]

This fixes it:

  on('before:browser:launch', async (browser = {}, launchOptions) => {
    const loader = extension.load({
      source: '/path/to/xt'
      alias: 'coolExtension'
    });

    const args = await loader(browser, []);

    launchOptions.args.push(...args);

    return launchOptions;
  });

[Pithikos]

@hitmands just a small typo; it's extensionLoader, not extension. But seems to work otherwise 👍

[hitmands]

@Pithikos that was just because I had the import named differently on my codebase,
probably the naming would have to be revisited anyway because it feels counter intuitive that extensionLoader.load would return a loader function...

[ViRuSTriNiTy]

@hitmands Next time you should not post a solution claiming it's yours when it's not. It is a simple rip of my solution posted months ago in #7 ... and then you included the mentioned typo. Very sad.

[hitmands]

Hi @ViRuSTriNiTy ,
from developer to developer, this definitely isn't the tone one should really use.
I don't know whether you're taking this like a challenge, but here we're just trying to get stuff done.

There was (and still is) an open issue around the args.findIndex,
and by looking on the internet we found out how to fix it.

Was my snippet elaborated from yours?
Yes, it probably was, I don't really remember anymore but it is indeed very likely.
Every future developer will feed himself with the work done by the previous generation,
this isn't anything but very human.

It wasn't an attack against your own copyrights.
I suggest you revisit the tone you use in conversations as github is meant to be welcoming everyone's contributions.

I also hope @ejoubaud will moderate your comment.

[pietrofxq]

This library is not needed anymore. You can launch a browser extension in the before launch hook like this:

on('before:browser:launch', (browser = {}, launchOptions) => {
    if (browser.name === 'chrome') {
      launchOptions.extensions.push('/path/to/extension')
      return launchOptions
    }
  })

[ViRuSTriNiTy]

@pietrofxq Yes, that is right, there is also an NPM module that implements this approach with additional bells and whistles: https://github.com/ejoubaud/cypress-browser-extension-plugin