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.
You could try to install the extension through Cypress chrome (and enable it).
You can use the before:browser:launch event to load a Chrome extension.
More information on how to use this event here.
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. :)
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
})
Related
I am testing the behavior of a chrome extension using puppeteer.
Upon installation, the extension opens a page. I would like to do initial setup in the browser before the extension is loaded (for example, setting local storage or injecting a jest mock).
The problem I have now is that the extension gets loaded upon browser start, so I don't know of any way to execute setup code before the extension is loaded.
This is how I load the extension currently (which resides in the dist/chrome folder):
const browser = await puppeteer.launch({
args: [
'--disable-extensions-except=dist/chrome',
'--load-extension=dist/chrome',
],
headless: false,
ignoreDefaultArgs: ['--disable-extensions'],
});
How can I do initial setup before the extension is loaded?
Some options I can think of are: 1) load the extension after the browser is launched 2) intercept the extension installation and execute setup code before the extension initializes
I came searching for an answer and I found it reading your question, so I'm leaving it here in case I have to search for it again in the future ...
The trick is to create a "launcher" extension with the sole purpose running the setup code, before the actual extension is ran. It would look like:
'--disable-extensions-except=dist/launcher,dist/chrome',
'--load-extension=dist/launcher,dist/chrome',
Can we disable java-script debugging of a project after hosting on IIS server, so user can not debug the java-script code with inspection.
Or can we hide our .js source files in browser?
It is not possible to prevent the Developer Tools for your end users.
But a little solution , you can prevent right-click to inspect element.
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
You all know open npm package: https://www.npmjs.com/package/open
Using this package, one can write the following code:
var open = require('./node_modules/open/lib/open.js')
open('http://www.cnn.com')
and activating it by:
$ node app.js
will open a browser window of cnn.com.
I want my script to open this site and inject some code to the console. I mean that the browser will behave like I clicked F12, went to 'console' tab and typed in console the code:
alert('Hello World')
Do you know how to do it?
The open module is used to "Open a file or url in the user's preferred application."
It can open the preferred application (a browser in this case) but it cannot control it. In fact, it doesn't even know what browser will that be (or even if that will be a browser).
What you are asking for can be achieved with tools like PhantomJS ("PhantomJS is a headless WebKit scriptable with a JavaScript API."), Nightmare.js ("A high-level browser automation library.") or CasperJS ("Navigation scripting & testing for PhantomJS and SlimerJS"), see:
http://phantomjs.org/
http://www.nightmarejs.org/
http://casperjs.org/
Problem is that jasmine-jquery in not loading my fixtures from spec/fixtures folder. Now when I look at jasmine-jquery source code default path for fixtures is spec/javascripts/fixtures.
In a version that I have, there is no spec/javascripts/fixtures folder. It seems it is something for Ruby gem. I also tried to create that javascripts folder but still it can't load it. When I place my fixture fragment inside of SpecRunner.html body - it works.
Here is my html fragment:
<ul class="fr">
<li></li>
</ul>
Spec file:
describe("something to describe", function() {
it("should see a DOM element", function() {
loadFixtures("custom.html");
expect($(".fr")).toExist();
});
});
Is that a bug or something with the path ?
Solved:
It is a problem with google-chrome. By default it doesn't allow access to other domain by same origin policy. Solution is to run app from local server, or to use firefox.
It indeed has to do with Chrome. This is a security concept called Same-Origin Policy.
Instead of running Firefox or the app from local server, you can still use Chrome with that security check disabled.
Just run Chrome/Chromium with the command-line argument --allow-file-access-from-files:
google-chrome --allow-file-access-from-files
Remember! Since this is a security feature, by disabling it you are putting your computer at risk. It is recommended to only use this parameter when testing local websites/apps (via a different shortcut/alias).
Is there a way to detect whether I'm running an extension that was installed from my .crx file or the extension was loaded as via 'Load unpacked extension...' button?
I'm aware about ID differences in that case, but I don't want to rely on hardcoded strings in the code.
If by "installed from my .crx file" you mean installed from Chrome Web Store you can simply check extension manifest.json for value of update_url attribute. CWS adds it when you upload your extension.
If you have a self-hosted .crx file, get your extension information using chrome.management.getSelf() and check installType of returned ExtensionInfo object. If it says "development" that means that extension was loaded unpacked in developer mode. "normal" means that it was installed from .crx file.
Here is a code sample how to do this:
function isDevMode() {
return !('update_url' in chrome.runtime.getManifest());
}
or
const isProdMode = 'update_url' in chrome.runtime.getManifest()
An extension is running in developer mode (i.e. unpacked), when it does not contain the update_url field in its manifest.
This works because an unpacked extension's JSON manifest file should not contain the update_url field. This field is automatically added when publishing via the Chrome Developer Dashboard.
For example, debug logs that only appear during development.
const IS_DEV_MODE = !('update_url' in chrome.runtime.getManifest());
function debugLog(str) {
if (IS_DEV_MODE) console.log(str);
}
debugLog('This only appears in developer mode');