maybe somebody use cypress for testing e2e flows together with backend API calls without some mocks.
I have a trouble right now, I want to use my local API from simple Laravel server like
http://127.0.0.1:8000, but all my XHR request aborted when I run tests. After some investigations I understood that if I change request baseUrl to https://example.com then requests works fine.
Example of XHR aborting
I already set chromeWebSecurity to false.
Cypress version: 4.0.2
cypress.json
{
"viewportWidth": 1920,
"viewportHeight": 1000,
"baseUrl": "http://localhost:4200",
"watchForFileChanges": false,
"integrationFolder": "cypress/build/cypress/integration",
"chromeWebSecurity": false,
"blacklistHosts": [],
"env": {
"host": "http://localhost:4200",
"baseUrl": "http://127.0.0.1:8000/api"
}
}
Related
We have a Vue2-based frontend application which uses v-b-toggle to expand/collapse elements on when clicked. When running Cypress tests (either component or e2e tests) locally (CLI and UI), we have not seen the elements fail to expand or collapse. However when running on our Bitbucket pipelines, they will occasionally fail. Has anybody had this issue, and come across a solution?
We can't reproduce this locally, and it only happens intermittently in our pipeline. We've resorted to skipping most of these tests.
I believe this Github issue shows the same behaviour: https://github.com/cypress-io/cypress/issues/7810
More details:
Versions in package.json
"bootstrap-vue": "^2.21.2"
"cypress": "^10.4.0",
"vue": "^2.6.12",
Scripts used for UI and CLI (pipeline) testing:
"test:e2e:ui": "TZ=Etc/UTC cypress open --e2e --browser=electron",
"test:e2e": "TZ=Etc/UTC cypress run --e2e --browser=electron",
"test:component:ui": "TZ=Etc/UTC cypress open --component --browser=electron",
"test:component": "TZ=Etc/UTC cypress run --component --browser=electron"
cypress.config.js:
const { defineConfig } = require("cypress");
module.exports = defineConfig({
env: {
local_url: "http://localhost:8080/",
},
video: false,
screenshotOnRunFailure: true,
defaultCommandTimeout: 8000,
chromeWebSecurity: false, // Disabled to prevent errors with iframes. Would need to reenable if checking for CORS errors in the future.
e2e: {
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents(on, config) {
return require("./cypress/plugins/index.js")(on, config);
},
experimentalSessionAndOrigin: true,
baseUrl: "http://localhost:8080",
},
component: {
setupNodeEvents(on, config) {},
specPattern: "src/**/*spec.{js,jsx,ts,tsx}",
devServer: {
framework: "vue-cli",
bundler: "webpack",
},
},
});
Happy to provide more information if required.
i had created a Vuejs project with PWA support but when i am building its production build it always using cached version of api requests i want to prevent it from using cache for api requests or change its policy from being to cacheFirst to NetworkFirst for api i found a i had changed vue.config.js to prevent cacheing but its not working
pwa: {
workboxOptions: {
exclude: [/.*\/api\//,],
},
},
any help on how i can either prevent cache on api routes or set networkFirst policy
exclude option only works for excluding precaching assets, which is what vue generates at build time, not api requests at run time.
It seems the Cache-Control problem of the api server, but if you do not have access to that server, you can config NetworkFirst policy runtimeCaching:
module.exports = {
pwa: {
workboxOptions: {
runtimeCaching: [{
urlPattern: new RegExp('^https://api.example.com/path'),
handler: 'NetworkFirst',
}]
}
}
};
I want to make requests to api on another website.
I know that in Angular you can have a file proxy.conf.json with something like this
{
"/api": {
"target": "website.com",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
Is there a way to do this in vue if I don't use vue-cli?
Ended up using express server with webpack dev middleware and express-http-proxy
I just ran the angular-cli setup for a new app. I have Apache running which is serving a local API on port 80 at http://localhost/path/to/api. Of course, ng start serves on port 4200 at http://localhost:4200.
I'm on Windows 10 if that is relevant.
So I researched proxying for Angular-cli and created proxy.config.json:
{
"/api/": { //I've tried "/api", "/api", "/api/*", none worked
"target" : {
"host": "localhost",
"protocol": "http:",
"port": 80
}, //also tried just straight "http://localhost" and "http://localhost:80"
"secure" : false,
"changeOrigin": false,
"logLeverl" : "debug",
"pathRewrite": {
"^/api/clients/public/" : "/path/to/api/clients/public/"
}
}
}
And hooked it up to npm start via package.json. I added the "pathRewrite" to test it on a specific path.
In the console, I get ERROR Object { _body: "<!DOCTYPE html> <html lang="en"> <h…", status: 404, ok: false, statusText: "Not Found", headers: Object, type: 2, url: "http://localhost:4200/path/to/api/clients/public/" } for the call /api/clients/public/
So from the URL I know the proxy config is working (pathRewrite is in effect) but the port is not changed.
I have tried every permutation of the config I've found on the internet and in the documentation.
Does anyone have an idea?
I also tried using a symlink into the Angular application folder but it is redirected to index.html, so if there is a way to exclude that path from the redirect, that works for me too.
Start with a simple version of proxy-conf.json. Here's what I use:
{
"/api": {
"target": "http://localhost:8000",
"secure": false
}
}
and run it with
ng serve --proxy-config proxy-conf.json
This works for me when I use the Node.js server (runs on port 8000), and it also works fine with Java Spring Boot (the Tomcat server). My servers just return data. Why do you need path rewrite? Using proxy-conf.json is for dev environment. When you'll deploy the app bundles under Apache, you won't need this proxy.
Error: Angular could not be found on the page index.html : retries looking for angular exceeded
I'm getting this error after I followed the ionic tutorial for setting up protractor.
Here's my protractor-conf.js:
exports.config = {
capabilities: {
// You can use other browsers
// like firefox, phantoms, safari, IE (-_-)
'browserName': 'chrome'
},
// chromeDriver: ['./node_modules/protractor/selenium/chromedriver'],
specs: [
// We are going to make this file in a minute
'e2e/specs.js'
],
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
isVerbose: true,
},
allScriptsTimeout: 20000,
onPrepare: function(){
browser.driver.get('http://localhost:3000');
}
};
I noticed in another tutorial, it had me give it a pointer to the selenium server. Maybe that's the problem?
I added the chromeDriver line in there, but it broke it even more, so I commented it out
Also, I have ionic serve up and running like the tutorial says.
Solved by adding the ionic server address localhost:8100/app to the baseURL property in protractor configuration file