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}'
}
})
Related
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.
I haven't use preact before. tried a working method with react. seems it's not working with preact.
The correct way to do this w/ Preact-CLI is to create (or edit) your preact.config.js like the following:
// preact.config.js
export default (config, env, helpers) => {
if (env.isProd) {
config.devtool = false;
}
}
We suggest this config (and others) in our config wiki, which you may want to take a look at: https://github.com/preactjs/preact-cli/wiki/Config-Recipes#disabling-source-maps-using-plugin-helpers
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'm using the tools specified in the title. I import lodash in my bootstrap.js
window._ = require('lodash');
However, when I try to use something like this (similar example to here), I get the error discribed in the title
created() {
this.test();
},
methods: {
test: _.debounce(function () {
console.log('calculating', true);
setTimeout(function () {
console.log('calculating', false);
}.bind(this), 1000)
}, 500),
}
However, if I remove the window._ = require('lodash'); and insert lodash manually in the page it works fine, like
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>
What I'm missing?
Also, What is the advantage of importing the libraries by require instead of using Gulp to merge and uglyfy everything?
I am not sure why you are getting that error related to _.
On your other question, I can think following advantage of using require over gulp or any other build tool:
All build tools comes with their own set of dependencies and other accessories, which bloats your overall code size.
You may start to rely on their plugins and time can come, when you need to use grunt for one task, while for other tasks you are using grunt, quting from gulp-grunt
What if your favorite grunt plugin isn't available for gulp yet? Don't fret, there is nothing to worry about! Why don't you just hook in your grunt configuration?
You will have to manage updating of different plugins of gulp and make sure all are working with new updated versions.
These are some of the things I have experienced or read about, but these tools do remove the pain of building, hot-reloading, compressing or obfuscating your code, but definetely there can be other raw way to do these, as what these are doing is providing you an abstraction.