I created new folder 'apitests' in cypress project and created a JavaScript test file in it. It does not show up in the test runner.
I have used the default configuration in cypress.json as specified in Cypress documentation
"testFiles": "**/*.*",
I expected my new folder 'apitests' and JavaScript test file to show in the test runner. Here is the end result.
Here is the file structure.
You've put your apitests folder directly in cypress/, while Cypress by default looks in cypress/integration/ folder.
You can change that by using integrationFolder config option, but I'd personally just keep the spec files in cypress/integration as is the default.
I had to add this to cypress.config.js:
module.exports = defineConfig({
e2e: {
specPattern: [
'cypress/e2e/*.js',
'cypress/e2e/**/*.js'
]
}
});
I had it initially, but removed it, to hope that Cypress would automatically find all my tests. But that resulted in new tests not being added to the test-runner.
My Cypress-version: 11.x.x (and I updated to 12.0.2 as a debugging attempt).
The solution was found in the Cypress-documentation for config.
You've put your apitests folder directly in cypress/, while Cypress by default looks in cypress/integration/ folder.
You will get an idea about it
Related
I need to support a custom directory structure on my project that uses Cypress for testing. As I am using cucumber preprocessor plugin to handle feature files (trying to work with ATDD approach but also I am using other plugins to manage accessibility and performance testing) I though why not try to split the directory structure this way
package.json
src/
testing/
---> acceptance/
---> accessibility/
---> performance/
---> cypress.acceptance.json
---> cypress.accessibility.json
---> cypress.performance.json
Where the cypress.X.json files are the Cypress configuration files that will act as the cypress.json for each testing folder.
To manage this I am adding some scripts to my package.json to make things easier
"scripts": {
...
"test:acceptance": "npx cypress run --config-file test/cypress.acceptance.json",
"test:performance": "npx cypress run --config-file test/cypress.performance.json",
"test:accessibility": "npx cypress run --config-file test/cypress.accessibility.json",
...
}
If we focus on the acceptance testing for a moment, the Cypress configuration (test/cypress.acceptance.json) looks something like this (yes I had to override all the defaults to make Cypress happy!)
{
"baseUrl": "http://localhost:3000/",
"video": true,
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"nonGlobalStepBaseDir": "test/acceptance/integration"
},
"testFiles": "**/*.feature",
"integrationFolder": "test/acceptance/integration",
"fixturesFolder": "test/acceptance/fixture",
"screenshotsFolder": "test/acceptance/screenshots",
"videoFolder": "test/acceptance/videos",
"pluginsFile": "test/acceptance/plugins/index.js"
}
From what I can tell this seems to be doable and in the docs https://github.com/TheBrainFamily/cypress-cucumber-preprocessor#configuration they give the options above in the "cypress-cucumber-preprocessor" where they also suggest the nonGlobalStepBaseDir should point at the same path as the integration folder (which I have done... except that all of this doesn't work. The error I am getting is the step definitions are not found (will post only one of the failed test for shortness, the others are the same)
Running: features/product-catalogue/product-catalog.feature (4 of 8)
Product Catalog
1) A customer is able to see the product catalog
2) The product catalog displays the navigation bar
3) The catalogue page view defaults to grid on mobile
0 passing (2s)
0 pending
3 failing
1) Product Catalog
A customer is able to see the product catalog:
Error: Step implementation missing for: products are available on the system
at Context.resolveAndRunStepDefinition (http://localhost:3000/__cypress/tests?p=test/acceptance/integration/features/product-catalogue/product-catalog.feature:12789:11)
at Context.eval (http://localhost:3000/__cypress/tests?p=test/acceptance/integration/features/product-catalogue/product-catalog.feature:12104:35)
Note that the internal directory structure used to work before when it was inside the traditional cypress/integration/features folder. At the end of the day I have just renamed things around and pushed one level down to test/acceptance/integration/features.
From what I can tell it's the plugin not able to get the base folder for the non-global step definitions, but I can't see why.
Any help would be highly appreciated, thank you
I've been running my component tests via cypress open-ct for a while now, relying on importing /node_modules/tailwindcss/dist/tailwindcss.min.css.
Since upgrading to Tailwind v3 some of my tests are failing as there is no prebuilt CSS file I can import - everything is generated just in time.
For example, testing if a modal closes when clicking on a overlay that is fixed and full width fails as the whole modal is rendered so that it is inaccessible by Cypress.
Another side-issue that stems from not having access to Tailwind classes is that videos recorded when running tests in CI are unusable as they are just a bunch of random native elements.
I've been importing Tailwind like this at the top of each Test file (before describes)
import { mount } from '#cypress/vue'
import '/node_modules/tailwindcss/dist/tailwind.min.css'
import MultiSelectField from './MultiSelectField.vue'
import { ref } from "vue";
Any ideas how to include Tailwind (preferably globally) so tests won't fail?
You can use the Tailwind CLI to generate your stylesheet on the fly.
Add this plugin in cypress/plugins/tailwind.js (be sure to change the -i source from ./src/styles/globals.css to your base CSS file):
before(() => {
cy.exec('npx tailwindcss -i ./src/styles/globals.css -m').then(
({ stdout }) => {
if (!document.head.querySelector('#tailwind-style')) {
const link = document.createElement('style')
link.id = 'tailwind-style'
link.innerHTML = stdout
document.head.appendChild(link)
}
},
)
})
Then, load the plugin by importing it in cypress/support/index.js:
import '../plugins/tailwind'
You should also set up a separate config file for your component tests, such as cypress/support/component.js, and specify that in your cypress.json config file:
{
"component": {
"supportFile": "cypress/support/component.js",
},
"e2e": {
"supportFile": "cypress/support/e2e.js"
}
}
Then, only include import '../plugins/tailwind' in your cypress/support/component.js config file, so that you don't perform the JIT compilation for your E2E tests (since it's unnecessary).
Michael Hays' solution works, but it rebuilds the whole .css file every time changes to the code are made, which slows tests down. An alternative would be to run tailwind externally in watch mode.
npm i -D concurrently
package.json
"scripts": {
"test": "concurrently \"tailwindcss -i ./src/index.css -o ./dist/index.css --watch\" \"cypress open\" "
},
cypress/support/component.ts
import "../../dist/index.css";
I see you're using import '/node_modules/tailwindcss/dist/tailwind.min.css' which expects a pre-compiled bundle. If you have any customization added to the tailwind config, those would not be covered.
But if you can't use the generated css and don't have any tailwind customization, you could use the cdn version from https://cdn.tailwindcss.com/
Because you are running it in a test and don't want to add to possible "flakyness" of using remote dependency, you'll likely want to download that file and keep it in the repo and update it manually from time to time. You can also use some automation for getting the correct version from the cdn before running the test, but Ideally you'd use the generated css, since that's what you're shipping so that's the resource that should be getting tested.
Looking at this post (Cypress - How can I run test files in order), I have several scripts specified under testFiles in cypress.json but opening Cypress with npm run cypress still shows all of the scripts in my repo and nothing happens.
Is there a way/trick to (a) automatically running the files specified in cypress.json in the UI and (b) a way to "toggle back" to all of the files in the repo (because I have some scratch files I use to isolate test features and additional tests that will eventually be added to the list)
The section from my cypress.json looks like
"testFiles:" :[
"/venueadmin/events/venueAdminCreateEvent.spec.js",
"/renter/renterInvalidLogin.spec.js",
"/renter/renterSignUp.spec.js"
]
etc.
Figured it out. There's a duplicate :
Also, if there's a slash pre-pended on the script name that needs to be removed
"testFiles" :[
"venueadmin/events/venueAdminCreateEvent.spec.js",
"renter/renterInvalidLogin.spec.js",
"renter/renterSignUp.spec.js",
I have a Laravel project and as you know when you deploy your app everything in your public directory should be copied over to your htdocs or public_html directory to hide your application's code.
I am using webpack to build my react code and everything else and each time I change my javascript webpack does what I want, it sees I make a change and then it builds it.
However I want to add one additional command after it builds and that is to copy everything from the public directory into the correct directory in htdocs/public_html.
So far I read up on this question here Run command after webpack build
It works and I can get the echo to work but I'm not sure why cp isn't working. Echo works but how do I know what shell commands I can use?
I tried 'cp' and even 'copy-item' which is powershell, but none are working.
This is my plugin so far, I figured I needed to change the directory to be safe
before copying anything over but again, nothing is working.
mix.webpackConfig(webpack => {
return {
plugins: [
new WebpackShellPlugin({
onBuildStart: ['echo "Starting Build ..."'],
onBuildEnd: ["cd 'E:\\xammp\\apps\\FactorioCalculator'",
"cp '.\\public\\*' '..\\..\\htdocs\\FactorioCalculator\\' -f -r"]
})
]
};
});
You could always use the copyDirectory mix method. Just put something like the following at the bottom of your webpack.mix.js file:
mix.copyDirectory('public', '../../htdocs/FactorioCalculator/')
You might have to change your path to ..\\..\\htdocs\\FactorioCalculator\\ as per the path in your question (I only have my mac with me so I'm unable to test on my other machine).
To answer you original question, if you want to execute a command each time webpack finishes building you can use the mix.then() which takes a closure.
I am using WebDriverIO and want to generate Allure Reports. I followed all steps mentioned in Allure
I did:
$ npm install wdio-allure-reporter --save-dev
package.json has:
"wdio-allure-reporter": "~0.0.2"
My wdio.conf.js:
reporters: [allure],
reporterOptions: {
allure: {
outputDir: 'allure-results'
}
},
When I do allure generate './allure-results' --clean
Report successfully generated to allure-report
But when go to /allure-report folder and open index.html, its a blank page. Also there is nothing in the .allure-results folder.
Can someone help please and direct in the right direction. What am I missing?
I had the same experience with allure when combining with wdio. No matter what combination I tried via https://docs.qameta.io/allure/latest/#_commandline, I kept getting a blank html report.
I found somewhere a mention of using serve instead of generate. I used the command ./node_modules/.bin/allure serve allure-results/. and VWOLAH! (?) It worked! It runs a local server with test results and data loaded in.
Although ... it doesn't seem to grab all test data, it seems to grab the very last test that ran and only that.
Use the following piece of code in the wdio.conf.js
reporters: ['allure'],
reporterOptions: {
allure: {
outputDir: 'allure-result',
disableWebdriverStepsReporting: true,
disableWebdriverScreenshotsReporting: false,
useCucumberStepReporter: false
}
},
Command to generate allure report
node_modules/.bin//allure generate allure-results/&& node_modules/.bin/allure open
#jazz, try updating the version of your wdio-allure-reporter.
In my package.json, I have "wdio-allure-reporter": "^0.1.2",