I am new to cypress. As for the latest version of cypress 10, when I run cypress open, it pop out below screen, having only two browsers option here. But I would like to use chrome to run my test.
Problem:
May I know how I can make the panel to show chrome option?
I already have had chrome installed
Coz I think the panel comes with no chrome is very strange, so I am not sure if it is something else problem. I also couldnt run the test after selecting Edge
This is my cypress config:
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});
Do you have chrome installed in your machine?
Cypress use the browsers that are locally installed by the user.
Related
I'm very new to Cypress. I am having a roadblock and don't seem to be able to proceed. I have a few specs written but I'm having trouble having Cypress retain the cookies and not clear them before each test. I've read about cy.session(), it's all pretty confusing lol but it seems that, in order for me to use cy.session(), I first have to implement this script:
e2e: { experimentalSessionAndOrigin: true, },
But, as soon, as I add that to cypress.config.js, a new file, e2e.js, is created in support folder and, when I launch Cypress, it treats it as a new project, none of the existing specs are showing up. What am I doing wrong?
It may happen if you upgrade from Cypress v9 to v10. There's a wizard that creates a few things for you to ease the migration.
In any case, with default settings in Cypress 10
specs should be in the /cypress/e2e/ folder
specs should have the extension .cy.js
This section of the config docs shows how you can modify the pattern, for example to use v9 settings
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
// revert to v9 configuration pattern
specPattern: 'cypress/integration/**/*.spec.{js,jsx,ts,tsx}'
}
})
Is it possible to get background_page target for Firefox Add-on in puppeteer?
For testing chrome extensions, I can easily access the background_page when extension is loaded by doing the following:
// Bring up chrome browser with extension loaded
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
ignoreHTTPSErrors: true,
timeout: 0,
args: [
`--disable-extensions-except=${CRX_PATH}`,
`--load-extension=${CRX_PATH}`,
'--ignore-certificate-errors',
'--no-sandbox',
'--disable-setuid-sandbox',
'--window-size=1920,1080',
],
});
// Fetch browser targets
const targets = await browser.targets();
// Filter out background_page for extension from the targets
const backgroundPageTarget = targets.find((target) => {
return target.type() === 'background_page';
});
I was able to load my firefox add-on by following these guides:
https://github.com/puppeteer/puppeteer/issues/4162
https://github.com/puppeteer/puppeteer/blob/f26bb7f4c44d9b7db5cc73c4af32db6fa5bcd3a2/experimental/puppeteer-firefox/README.md#add-ons
However, I've been unable to access the background_page of the add-on. I need that to intercept and validate requests and responses made by the add-on.
I managed to make it work with Selenium by following these steps:
Open up the same Firefox browser application that you're making Puppeteer connect to.
Load the extension the same way that you make Puppeteer load it (there's different ways, I did it by loading an unsigned version with Firefox dev edition).
Activate the popup window for the extension, then right click and select View page source.
In the URL, you should see this pattern view-source:moz-extension://<extension-id>/<extension-page-name>.html
Using this extension ID, you can make your script go to the background page by having the browser navigate to moz-extension://<extension-id>/<background-page-name>.html
We are using the latest version 4.7.3 of CKEditor (Full) available from nuget. We've tried a number of suggested solutions to disable the Preview toolbar button while in Source Mode, but could not get it to work. There are cases when there are more than one editor on a page, and they are added as user controls (.ascx) due to some unrelated logic. For example we've tried the below:
CKEDITOR.on('instanceReady', function (instance) {
instance.editor.addCommand('preview', {
modes: { wysiwyg: 1, source: 0 }
});
});
We configure the toolbar buttons via config.js.
CKEDITOR.editorConfig = function (config) {
config.toolbar_CMToolbar =
[
{ name: 'sourcedialog', items: ['Source', '-', 'Preview'] }
];
};
The reason we need this is to avoid a security issue when malicious script has been added while in Source Mode and the Preview was immediately requested, causing javascript to execute. Ordinarily the wysiwyg mode would clean this up and the malicious scripts would have been validated.
Below is the sample script that triggers the issue, for reference. (include everything from double-quote to tag close)
"><img src=x onerror=alert(7)>
Granted this is just evading the main issue rather than fixing it, but this workaround would be handled quicker.
Hoping to hear suggestions on how to correct this. Thanks!
You can change properties of commands like this:
CKEDITOR.on('instanceReady', function(evt) {
evt.editor.commands.preview.modes.source = 0;
});
I am facing the cache issue whenever I do a new deployment, changes are not reflecting automatically. Always I have to go to the browser setting and clear the cache.
Is there a way to handle this issue automatically whenever I do the new deployment.
requirejs.config({
// Path mappings for the logical module names
paths: {
'knockout': 'libs/knockout/knockout-3.4.0',
'jquery': 'libs/jquery/jquery-3.1.1.min',
'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.12.0',
'promise': 'libs/es6-promise/es6-promise.min',
'ojs': 'libs/oj/v3.2.0/min',
'ojL10n': 'libs/oj/v3.2.0/ojL10n',
'ojtranslations': 'libs/oj/v3.2.0/resources',
'signals': 'libs/js-signals/signals.min',
'text': 'libs/require/text',
'hammerjs': 'libs/hammer/hammer-2.0.8.min',
'moment': 'libs/moment/moment.min',
'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
'customElements': 'libs/webcomponents/CustomElements'
},
waitSeconds: 0,
// urlArgs will be appended at end of .js files
urlArgs: "v=1.33",
// Shim configurations for modules that do not expose AMD
shim: {
'jquery': {
exports: ['jQuery', '$']
}
},
config: {
ojL10n: {
merge: {
//'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
}
}
}
});
You can update version (by changing urlArgs parameter in configuration) every time you deploy new code, thus every time new JavaScript file will be downloaded.
This can always be a problem during development. There are a couple of solutions.
1) Build into your app URL, a version string. Every time you publish a new version, change that number and the browser will pull new files
2) Set the cache control values on your server so that it doesn't cache anything from your app directory
3) Just do what you're doing with clearing browser cache. There are utilities that add a button on the browser bar to make it easier to get at.
I personally use the node http-server library to run my dev work and I use it's cache control arguments to make sure nothing is being cached.
http-server -c-1 -o
The above turns off caching and launches the browser from the current location (loading index.html if present)
With Chrome: if you open the Developer Tools (F12), on the Network tab you can check the Disable cache checkbox, which turns off caching, while the DevTools is open.
With Firefox: if you open the Developer Tools (F12), click the cogwheel icon ("Toolbox Options"), then in the "Advanced Settings" section, check the Disable Cache (when toolbox is open) checkbox.
Now there will be no caching in the browser. Might slow down stuff seriously...
I created a Firefox extension and chrome extension. In Chrome I am using background.cs, so it will get loaded only once for all Chrome instances, so if I will write simple alert in background it will show alert box only for once.
The same thing is not working with Firefox, it will show that alert message all the times when I will open new Firefox windows.
Is there anything like background in Firefox?
Either write a javascript module or switch to the Add-on SDK
A javascript module would be something like this
this.EXPORTED_SYMBOLS = ["Helper"];
this Helper = {
initialized: false,
init: function() {
if(this.initialized){
return;
}
// code here is executed only the first time init() is called
this.initialized = true;
}
};