is there some way how to rename downloaded file in test?
Was looking for advice on google, but did not find any.
Current code to download load file:
cy.get(':nth-child(2) > .btn').contains(domData.dwnldContractFiles).as('dwnldContractFiles').should('exist').should('be.visible').and('not.be.disabled')
cy.get('#dwnldContractFiles').click()
cy.verifyDownload(domData.allFiles, {timeout: 30000, interval: 3000})
You can use cypress-downloadfile if you are not tied to any download mechanism.
In order to install this package you need tinpm install cypress-downloadfile
Then add the following line to cypress/support/commands.js.
require('cypress-downloadfile/lib/downloadFileCommand');
Update your cypress.config.js file with:
const { defineConfig } = require('cypress')
const {downloadFile} = require('cypress-downloadfile/lib/addPlugin')
module.exports = defineConfig({
// setupNodeEvents can be defined in either
// the e2e or component configuration
e2e: {
setupNodeEvents(on, config) {
on('task', {downloadFile})
})
}
}
})
Finally, you can use it in your tests and set any name you want:
cy.downloadFile('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg','downloads',chosenName)
Related
in package.json I used these versions of cucumber and esbuild with cypress:
"cypress-cucumber-preprocessor": {
"stepDefinitions": "cypress/support/step_definitions/**/*.{js,ts}"
},
"devDependencies": {
"#badeball/cypress-cucumber-preprocessor": "^11.5.1",
"#bahmutov/cypress-esbuild-preprocessor": "^2.1.5",
"cypress": "^10.7.0"
},
In cypress.config.js I have:
e2e: {
baseUrl: 'http://localhost:4200',
specPattern: 'cypress/e2e/features',
setupNodeEvents(on, config) {
const createEsbuildPlugin =
require('#badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin
const createBundler = require('#bahmutov/cypress-esbuild-preprocessor')
require('#badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin
on('file:preprocessor', createBundler({
plugins: [createEsbuildPlugin(config)],
}));
}
},
Now, this is working fine, no issues. But after I upgraded the cucumber preprocessor to:
"#badeball/cypress-cucumber-preprocessor": "^15.1.2",
and cypress version to 12.3.0
then ran npm install and started cypress test runner, I can't run any test.
After starting the test runner, however I can see all my tests there, but after I click any test, there is an error: Cypress could not detect tests in this file and this:
Error: Build failed with 1 error:
node_modules/common-ancestor-path/index.js:17:37: ERROR: [plugin: feature] Reduce of empty array with no initial value
at failureErrorWithLog (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1605:15)
at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1251:28
at runOnEndCallbacks (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1034:63)
at buildResponseToResult (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1249:7)
at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1358:14
at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:666:9
at handleIncomingPacket (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:763:9)
at Socket.readFromStdout (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:632:7)
at Socket.emit (node:events:527:28)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
When I downgrade the cucumber preprocessor and cypress, it is working again. Is there anything I should change in config file or what is the issue?
I tried both versions, "#badeball/cypress-cucumber-preprocessor": "^15.1.2" worked ok but I did have to modify your config in line with the sample on the badeball repo:
awaiting the addCucumberPreprocessorPlugin() call
passing in the on, config params
returning the config at the end of setupNodeEvents()
putting a wildcard into specPattern (could explain test-not-found error)
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
// baseUrl: 'http://localhost:4200',
specPattern: "**/*.feature",
// prefix async
async setupNodeEvents(on, config) {
const createEsbuildPlugin = require('#badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin
const createBundler = require('#bahmutov/cypress-esbuild-preprocessor')
// await here
await require('#badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin(on, config)
on('file:preprocessor', createBundler({
plugins: [createEsbuildPlugin(config)],
}));
// return any mods to Cypress
return config
}
},
});
So as I still had issues with using esbuild, I replaced it with browserify:
const { defineConfig } = require("cypress");
const preprocessor = require("#badeball/cypress-cucumber-preprocessor");
const browserify = require("#badeball/cypress-cucumber-preprocessor/browserify");
async function setupNodeEvents(on, config) {
await preprocessor.addCucumberPreprocessorPlugin(on, config);
on("file:preprocessor", browserify.default(config));
return config;
}
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:4200',
specPattern: "**/*.feature",
setupNodeEvents,
},
});
So now the package.json looks like:
"#badeball/cypress-cucumber-preprocessor": "^15.1.2",
"#cypress/browserify-preprocessor": "^3.0.2",
"cypress": "^12.3.0",
I also needed to replace all AND commands in step definitions js files, e.g.:
Before:
import { And, Then } from "#badeball/cypress-cucumber-preprocessor"
And("I select Checkbox", () => {}
Now:
import { When, Then } from "#badeball/cypress-cucumber-preprocessor"
When("I select Checkbox", () => {}
As And should be used in feature files, and in step definitions only When, Then.
With this config the latest cypress works with the latest cucumber and browserify.
I have updated my project to cypress 10. But getting this error couldn't solve the problem described in the title.
my feature file:
spec file:
Error:
File order:
Config file:
package.json file:
It's probably a mistake to use both cypress-cucumber-preprocessor and #badeball/cypress-cucumber-preprocessor in the same project.
Uninstall cypress-cucumber-preprocessor, it is a defunct version.
Then follow badeball Example setup to make corrections to the configuration, for example
import { defineConfig } from "cypress";
import createBundler from "#bahmutov/cypress-esbuild-preprocessor";
import { addCucumberPreprocessorPlugin } from "#badeball/cypress-cucumber-preprocessor";
import createEsbuildPlugin from "#badeball/cypress-cucumber-preprocessor/esbuild";
export default defineConfig({
e2e: {
specPattern: "**/*.feature",
async setupNodeEvents(
on: Cypress.PluginEvents,
config: Cypress.PluginConfigOptions
): Promise<Cypress.PluginConfigOptions> {
// This is required for the preprocessor to be able to generate JSON reports after each run, and more,
await addCucumberPreprocessorPlugin(on, config);
on(
"file:preprocessor",
createBundler({
plugins: [createEsbuildPlugin(config)],
})
);
// Make sure to return the config object as it might have been modified by the plugin.
return config;
},
},
});
Creating a new test file in Cypress folder integration is not showing in the Cypress UI.
In this print-screen I have created a new file called: NewTest.spec.js (in green). It is not showing in Cypress.
It used to work
In case you have a testFiles list defined inside the cypress.json file, Cypress will not include all of spec files found within the integration folder and will instead use that list to populate the suite.
So, check cypress.json and add the new spec file to the appropriate place in the order.
"testFiles": [
"FirstTest.spec.js",
"NewTest.spec.js",
"ThirdTest.spec.js"
]
In the latest version of Cypress, make sure your file is named [filename].cy.js
This is for cypress 10 and above - You can also specify the spec pattern in cypress.config.js as below, for all of the files to show up.
No need to name the files as [filename].cy.js for these to show up.
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
specPattern: "cypress/e2e/**/*.*",
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});
In cypress.config.ts you need to define your pattern with specPattern:
Like this:
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
specPattern: 'cypress/integration/*.cy.ts', // write your pattern here
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});
I am using the StoryShots addon for Storybook to test snapshots from my React project. I would like to save all snapshot files in one directory in relation to the project directory. The default is that the snapshots are saved in relation to the story's location. I tried various configurations (like working with __dirname) but couldn't come up with a solution yet. Maybe someone has an idea?
Here is my storyshots test file used by Jest (storyshots.test.ts):
import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '#storybook/addon-storyshots'
initStoryshots({
test: multiSnapshotWithOptions(),
stories2snapsConverter: new Stories2SnapsConverter({
snapshotsDirName: './__snapshots__/',
storiesExtensions: ['.js', '.jsx', '.ts', '.tsx'],
})
})
You can do something like this:
const IMAGE_SNAPSHOT_DIR = path.resolve(path.join(__dirname, 'component-image-snapshots'));
initStoryshots({
test: imageSnapshot({
getMatchOptions: (option) => {
const filename = option.context.kind.replace(' ', '');
return {
customSnapshotsDir: path.join(IMAGE_SNAPSHOT_DIR, filename),
};
},
}),
});
I am currently trying to load a csv file into a Nuxt page. The folder structure is below and produces the error "Failed to load resource: the server responded with a status of 404 (Not Found)":
Project
|
+--pages
|
+--lesson
|
+--index.vue
+--file.csv
import * as d3 from 'd3';
export default{
data(){
return{
dataset1:[]
}
mounted(){
d3.csv('file.csv', (myData) => {
console.log('Mydta', myData);
this.dataset1 = myData;
})
}
}
I have added the following to the web pack config in the nuxt-folder:
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
config = {
module: {
rules: [
{
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true
}
}
]
}
}
}
}
Thanks in advance
I recently had the same question and ended up using the #nuxt/content module – worked like a charm, didn't even need to include d3 (which is usually my go-to for parsing CSV files).
I believe the issue is you cannot access the csv file the way you are attempting to, the way to do that would be storing the file in the '/assets' directory which you can then access as shown in the docs I linked ~/assets/file.csv I think this is also a more correct location for storing such files to avoid having lingering files throughout the project
This worked for me:
async mounted() {
const d = await d3.csv("/data.csv");
console.log(d);
}
With data.csv placed in public folder.