Cypress test runs localy but fails to run on cypress cloud - cypress

So locally my cypress tests run as expected and work fine, but in the cypress cloud they return the following error:
cy.visit() failed trying to load:
/
We failed looking for this file at the path:
/Users/nigel/Documents/portfolio/
The internal Cypress web server responded with:
> 404: Not Found
The tests are written as follows:
describe('Language switcher working', () => {
it('See if the current language is Dutch', () => {
cy.viewport(1496, 1362)
cy.visit('/')
cy.contains('p', 'Ik ben een 2e jaars HBO-ICT Software Engineering student bij de Hogeschool Van Amsterdam.')
})
it('Switch to English', () => {
cy.viewport(1496, 1362)
cy.visit('/')
cy.get('#langSwitcher').select('en')
cy.contains('p', 'I am a second year Software Engineering student at the Amsterdam University of Applied Sciences.')
})
})
The cypress config file has the following content:
import { defineConfig } from "cypress";
export default defineConfig({
projectId: 'gmxneo',
fixturesFolder: "tests/e2e/fixtures",
screenshotsFolder: "tests/e2e/screenshots",
videosFolder: "tests/e2e/videos",
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("./tests/e2e/plugins/index.js")(on, config);
},
specPattern: "tests/e2e/specs/*.cy.{js,jsx,ts,tsx}",
supportFile: "tests/e2e/support/index.js",
},
component: {
devServer: {
framework: "vue-cli",
bundler: "webpack",
},
},
});
The stacktrace is here:
at <unknown> (http://localhost:54356/__cypress/runner/cypress_runner.js:138231:84) at
visitFailedByErr (http://localhost:54356/__cypress/runner/cypress_runner.js:137639:12) at
<unknown> (http://localhost:54356/__cypress/runner/cypress_runner.js:138214:13) at
tryCatcher (http://localhost:54356/__cypress/runner/cypress_runner.js:8914:23) at
Promise._settlePromiseFromHandler
(http://localhost:54356/__cypress/runner/cypress_runner.js:6849:31) at
Promise._settlePromise (http://localhost:54356/__cypress/runner/cypress_runner.js:6906:18) at Promise._settlePromise0
(http://localhost:54356/__cypress/runner/cypress_runner.js:6951:10) at
Promise._settlePromises (http://localhost:54356/__cypress/runner/cypress_runner.js:7027:18) at
_drainQueueStep (http://localhost:54356/__cypress/runner/cypress_runner.js:3621:12) at
_drainQueue (http://localhost:54356/__cypress/runner/cypress_runner.js:3614:9) at
../../node_modules/bluebird/js/release/async.js.Async._drainQueues
(http://localhost:54356/__cypress/runner/cypress_runner.js:3630:5)
at Async.drainQueues (http://localhost:54356/__cypress/runner/cypress_runner.js:3500:14) From Your Spec Code: at
Context.eval (webpack:///./tests/e2e/specs/changeLang.cy.js:6:7)
I tried looking for other people that have this issue, but I couldn't find anything.
I have tried setting a base URL, but then it just waits for my local server to load up and that wont work if i want to integrate it with github actions i think.

Related

Cypress - can't run tests after upgrading cucumber preprocessor

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.

Cypress: How to add functions to Mocha Context?

I am trying add functions to this (which is a Mocha Context) in tests, so I can do e.g.
describe('my spec', () => {
it('should work', function () {
this.sayHelloWorld();
})
})
In an empty folder I call
yarn add cypress
yarn cypress open
so that default config files are created. It also creates a sample test in cypress/e2e/spec.cy.js.
I can run the sample test without problem. But if I add
import { Context } from "mocha";
to cypress/support/e2e.js I get
Error: Webpack Compilation Error
./cypress/support/e2e.js
Module not found: Error: Can't resolve 'mocha' in '...\support'
resolve 'mocha' in '...\support'
Parsed request is a module
So I installed Mocha, the same version which is in devDependencies of Cypress (see package.json):
yarn add mocha#3.5.3
My package.json now looks like this:
{
"dependencies": {
"cypress": "^10.4.0",
"mocha": "3.5.3"
}
}
Now that import line passes. But this fails:
import { Context } from "mocha";
Context.prototype.sayHelloWorld = () => console.log("hello world");
Error:
> Cannot read properties of undefined (reading 'prototype')
Why is that? In comparison adding something to String.prototype works.
Also in comparison: Again in an empty folder:
yarn add mocha#3.5.3
And in test/test.js:
const { Context } = require("mocha");
it("should work", function () {
Context.prototype.sayHelloWorld = () => console.log("hello world");
this.sayHelloWorld();
});
Now yarn mocha works (says hello world).
What is going on in Cypress? Possibly a bug?
Solution:
no import { Context } from "mocha";
add functions like that:
Mocha.Context.prototype.sayHelloWorld = function () {
cy.log('hello world');
};

Cannot use import statement outside a module when running android app with firebase

Using nativescript-vue and can't make my app run after upgrading to latest version of nativescript.
"nativescript": {
"id": "xxx",
"tns-ios": {
"version": "6.5.1"
},
"tns-android": {
"version": "6.5.1"
}
},
App.js:
import Vue from "nativescript-vue";
import App from "./components/App";
const firebase = require('nativescript-plugin-firebase')
const {LocalNotifications} = require("nativescript-local-notifications")
firebase.init({
showNotifications: true,
showNotificationsWhenInForeground: true,
onMessageReceivedCallback: (message) => {
console.log('[Firebase] onMessageReceivedCallback:', {message});
LocalNotifications.schedule(
[{
id: 1,
title: message.data.title,
body: message.data.body,
silhouetteIcon: 'res://ic_app_icon',
thumbnail: "res://icon",
forceShowWhenInForeground: true,
notificationLed: true,
channel: i18n.t('messages_about_orders')
}])
.catch(error => console.log("doSchedule error: " + error));
}
}).then(
function () {
console.log("firebase.init done");
},
function (error) {
console.log("firebase.init error: " + error);
}
);
I run tns run android and right after I get Webpack build done in the console, I get these messages and a crash:
nativescript-plugin-firebase: /Users/butaminas/Local Sites/getfast.co.nz-courier-app/platforms/android/.pluginfirebaseinfo not found, forcing prepare!
nativescript-plugin-firebase: running release build or change in environment detected, forcing prepare!
Cannot use import statement outside a module
What could be the problem here? I have another, similar app and it is all working fine.
I figured it out. It was the problem with hooks folder in the project root directory.
I don't know why this happened but after removing the plugin (the hooks directory was not removed) I removed the hooks folder manually and then installed the plugin again - the problem disappeared.

ECONNREFUSED using nightwatch-accessibility library

I'm trying to use the nightwatch-accessibility library, but keep getting error
POST /session/b4e18278544c74b9213c030b8119ee7e/timeouts/async_script - ECONNREFUSED
Error: connect ECONNREFUSED 127.0.0.1:9515
Error while running .setTimeoutsAsyncScript() protocol action: An unknown error has occurred.
POST /session/b4e18278544c74b9213c030b8119ee7e/execute_async - ECONNREFUSED
Error: connect ECONNREFUSED 127.0.0.1:9515
Error while running .executeScriptAsync() protocol action: An unknown error has occurred.
Normal tests work fine. As far as I can tell I am following the example correctly. The test assertions work correctly it just appears at the end of the test run.
nightwatch.json
{
"src_folders": ["test"],
"page_objects_path": "page-objects",
"globals_path": "./globals.js",
"custom_commands_path": ["./node_modules/nightwatch-accessibility/commands"],
"custom_assertions_path": ["./node_modules/nightwatch-accessibility/assertions"],
"end_session_on_fail": false,
"skip_testcases_on_fail": false,
"selenium": {
"start_process": false
},
"webdriver": {
"start_process": true,
"server_path": "node_modules/chromedriver/lib/chromedriver/chromedriver.exe",
"port": 9515
},
"test_settings": {
"default": {
"webdriver.port": 9515,
"desiredCapabilities": {
"browserName": "chrome"
}
}
}
}
globals.js
const chromedriver = require('chromedriver');
module.exports = {
before: function (done) {
chromedriver.start();
done();
},
after: function (done) {
chromedriver.stop();
done();
}
};
First test
module.exports = {
'#tags': ['accessibility'],
'First test': function (browser) {
browser
.url(`http://www.google.com`)
.pause(3000)
.initAccessibility()
.assert.accessibility('html', {
verbose: true
})
.end()
}
}
Executing by typing nightwatch from the terminal like I would other tests. Any ideas and is this the best accessibility assertion library for NightwatchJS?
I ended up using nightwatch-axe-verbose instead. Usage details included on this web accessibility testing using nightwatch blog post.

Reference Error :cy is not defined while running cypress test

Describe('The Login', function () {
beforeEach(function () {
cy.readFile(Cypress.env('test')).as("user")});
it("Login", () => {
cy.get("#user").then((user) =>
cy.login(user.username, user.password))})
FAIL cypress/integration/login.spec.js
● The Login Page ›
ReferenceError: cy is not defined
at Object.<anonymous> (cypress/integration/login.spec.js:4:5)
at new Promise (<anonymous>)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
To add some context to the answer by #sai, to resolve this eslint error all I had to do was install eslint-plugin-cypress from here.
npm install eslint-plugin-cypress --save-dev
Then, in my eslint config I added one line to my extends array.
Your config could be .eslintrc.json or the "eslintConfig" configuration object in your package.json
{
"extends": [
"plugin:cypress/recommended"
]
}
Testing locally, this should work for you. Change path of your json file, and use your custom command cy.login. In my example I just printed variables to console.
describe('The Login', () => {
beforeEach(() => {
cy.readFile('cypress/integration/test/test.json').as("user")});
it("Login", () => {
cy.get("#user").then((user) =>
cy.log(user.username, user.pass))
})
})
My test.json was:
{
"username":"test#test.com",
"pass":"pass"
}
The issue was related to eslint
Had to install few packages and made an update to eslintrc files

Resources