I am trying to call an external script from a Cypress test using cy.exec to create an environmental variable which I then want to access this environmental variable in the test. Is this possible using Cypress.env(<environmental variable>)?
The external script looks like:
const cypress = require('cypress');
const pkg = require('#glib/cypress-secrets');
const { createAuthApiKeyKubeSecret } = pkg;
const username = 'test-consumer';
const apikey = createAuthApiKeyKubeSecret(username);
console.log(apikey);
process.env.apikey = apikey;
This script is called by the before function in the test.
describe("Test to create a capability", function () {
before(() => {
cy.exec('node create-secret.js');
});
after(() => {
cy.exec('node delete-secret.js', {log: true});
});
it('Checks on the Create page', function() {
cy.visit(Cypress.config().baseUrl + "?apikey=" + Cypress.env('apikey'));
// We need to check if we are on the correct page
// We just need to check two elements, a label and a button.
cy.contains('About the capability').should('exist');
cy.contains('button', 'Next Step').should('exist')
});
});
The baseUrl is set correctly but the apikey environmental variable is coming back undefined.
According to the documentation (here) you have to put cypress_ or CYPRESS_ before the variable name:
process.env.cypress_apikey = apikey;
Related
I'm tryin to do this command:
Cypress.Commands.add('login', (userId, password) => {
cy.origin('https://some-sso.page', () => {
cy.get('input[placeholder="UserID"]').type(userId);
cy.get('input[placeholder="Password"]').type(password0);
cy.contains('SIGN IN').click();
});
});
And call it with:
cy.login('someUser', '12345');
But I get the error:
userId is not defined
Variables must either be defined within the cy.origin() command or passed in using the args option.
I tried to add some const inside the cy.origin because without the custom command was working, like this:
cy.origin('https://some-sso.page', () => {
const userId = 'someUser';
const pass = '12345';
cy.get('input[placeholder="User ID"]').type(userId);
cy.get('input[placeholder="Password"]').type(pass);
cy.contains('SIGN IN').click();
});
cy.get('#div > section').contains('It works');
How could I do that custom Command?
The cy.origin() command creates a sandbox, which prevents closures from working - you have attempted to use the custom command parameter as a closure variable inside the cy.origin().
Any variables need to be explicitly passed in as a single parameter object, like this
Cypress.Commands.add("login", (userId, password) => {
cy.origin("https://some-sso.page",
{ args: { userId, password } }, // variables passed in
({ userId, password }) => { // inside, unwrapped (destructured)
cy.wrap(userId).should("eq", "someUser"); // passes
cy.get('input[placeholder="UserID"]').type(userId);
cy.get('input[placeholder="Password"]').type(password);
cy.contains("SIGN IN").click();
}
);
});
Looking for a definitive answer to the question posed by #JeffTanner here about generating dynamic tests. From that question and the Cypress samples, it's clear that we need to know the number of tests required before generating them.
Problem
We have a web page containing a table of Healthcare analytic data that is refreshed many times during the day. Each refresh the team must check the data, and to divvy up the work we run each row as a separate test. But the number of rows varies every time which means I must count the rows and update the system on each run. Looking for a way to programmatically get the row count.
The HTML is a table of <tbody><tr></tr></tbody>, so the following is enough to get the count but I can't run it in a beforeEach(), the error thrown is "No tests found"
let rowCount;
beforeEach(() => {
cy.visit('/analytics')
cy.get('tbody tr').then($els => rowCount = $els.length)
})
Cypress._.times(rowCount => {
it('process row', () => {
...
})
})
The before:run event fires before the tests start, you can scan the web page there.
Set the event listener in setupNodeEvents(). Cypress commands won't run here, but you can use equivalent Node commands.
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
on('before:run', async (details) => {
try {
const fetch = require('node-fetch');
const fs = require('fs-extra');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const response = await fetch(config.env.prescan); // default below
const body = await response.text(); // or pass in command line
const dom = new JSDOM(body);
const rows = dom.window.document.body.querySelectorAll('tr') // query
// save results
fs.writeJson('./cypress/fixtures/analytics-rows.json', {rows:rows.length})
} catch (error) {
console.log('error:', error)
}
})
},
},
env: {
prefetch: 'url-for-analytics-page'
}
})
Test
import {rows} from './cypress/fixtures/analytics-rows.json' // read row count
Cypress._.times(rows, (row) => {
it(`tests row ${row}`, () => {
...
})
}
You can add a script scan-for-rows.js to the project scripts folder, like this
const rp = require('request-promise');
const $ = require('cheerio');
const fs = require('fs-extra');
rp('my-url')
.then(function(html) {
const rowCount = $('big > a', html).length
fs.writeJson('row-count.json', {rowCount})
})
.catch(function(err){
//handle error
});
Then in package.json call a pre-test script every time a new version of the web page appears.
One possibility is to run the above Cypress test in a pretest script which will always run before your main test script.
// package.json
{
...
"scripts": {
"pretest": "npx cypress run --spec cypress/e2e/pre-scan.cy.js",
"test": "npx cypress run --spec cypress/e2e/main-test.cy.js",
}
}
// pre-scan.cy.js
it('scans for table row count', () => {
cy.visit('/analytics');
cy.get('tbody tr').then($els => {
const rowCount = $els.length;
cy.writeFile('cypress/fixtures/rowcount.json', rowCount);
});
});
Here's a way to get the row count in the spec file without using extra packages, plugins, test hooks, or npm scripts.
Basically, you can create a separate module that makes a synchronous HTTP request using the XMLHTTPRequest class to the /analytics endpoint and use the browser's DOMParser class to find the return the number of <tr> tags.
// scripts/get-row-count.js
export function getRowCount() {
let request = new XMLHttpRequest();
// Set async to false because Cypress will not wait for async functions to finish before looking for it() statements
request.open('GET', '/analytics', false);
request.send(null);
const document = new DOMParser().parseFromString(request.response, 'text/html');
const trTags = Array.from(document.getElementsByTagName('tr'));
return trTags.length;
};
Then in the spec file, import the new function and now you can get an updated row count whenever you need it.
import { getRowCount } from '../scripts/get-row-count';
Cypress._.times(getRowCount() => {
it('process row', () => {
...
})
})
The reason for XMLHTTPRequest instead of fetch is because it allows synchronous requests to be made. Synchronous requests are needed because Cypress won't wait for async requests to come back before parsing for it() blocks.
With this, you always have the most up to date row count without it going stale.
How to access configuration declared in privateRuntimeConfig in Nuxt.config.js file in serverMiddleware?
$config and context are not available in serverMiddleware.
I am using serverMiddleware in Nuxtjs to write api.
Its getting called however I am trying to pass some configuration from privateRuntimeConfig in Nuxt.config.js file.
const bodyParser = require('body-parser')
const app = require('express')()
const { uuid } = require('vue-uuid')
const productsModule = require('../lib/bal/products')
app.use(bodyParser.json())
app.post('/create', (req, res) => {
console.log('Config:' + String(req))
const result = productsModule.createProduct(this.$config, req.body.name, 'Trial product', '', 10, false, uuid.v1)
if (result === undefined) {
res.status(500).json({ error: 'Failed to create product. Try again!' })
return
}
console.log(result)
res.status(200).json(result)
})
module.exports = app
Yes you are right, since serverMiddleware only runs at service-side you can't use this.$config or context.$config.
What i did is, if it is a static data, i use environment variables to call the data.
.env file
APP_USERNAME=M457ERCH1EF
serverMiddleware file i.e xxx.js
....
const username = process.env.APP_USERNAME
....
I want to make parallel requests in cypress. I define a command for that:
const resetDb = () => {
const apiUrl = `${Cypress.config().baseUrl}/api`;
Cypress.Promise.all([
cy.request(`${apiUrl}/group/seed/resetDb`),
cy.request(`${apiUrl}/auth/seed/resetDb`),
cy.request(`${apiUrl}/email/seed/resetDb`),
]);
};
Cypress.Commands.add('resetDb', resetDb);
However, it is still making those requests in sequence. What am I doing wrong?
I was able to solve this problem using task in Cypress, which allows you to use nodejs API.
In the plugins index file, I define a task as follows:
const fetch = require('isomorphic-unfetch');
module.exports = on => {
on('task', {
resetDb() {
const apiUrl = `http://my.com/api`;
return Promise.all([
fetch(`${apiUrl}/group/seed/resetDb`),
fetch(`${apiUrl}/auth/seed/resetDb`),
fetch(`${apiUrl}/email/seed/resetDb`),
]);
},
});
};
The it can be used as follows:
before(() => {
return cy.task('resetDb');
});
I am trying to use the property launch_url in my tests and append a relative path to it before sending the browser to that url.
I know that browser.init(); send the browser to the address in launch_url but I was wondering if it is possible to append some string to the retrieved url before executing the redirect.
Assuming my launch_url is www.xxx.com, I'd like to do something like:
this.test = function (client) {
client.init("/a/b/c"); // >> should result in the browser going to www.xxx.com/a/b/c
};
Any idea?
Thanks
If you have specified a "launch_url" in your nightwatch.json file, you can access it on the 'client' object passed into your tests. For example:
module.exports = {
'Demo test Google' : function (client) {
client
.url(client.launch_url)
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'nightwatch')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('#main', 'Night Watch')
.end();
}
};
So, for your example code:
this.test = function (client) {
client.url(client.launch_url + "/a/b/c"); // >> should result in the browser going to www.xxx.com/a/b/c
};
An alternative would be to create a config file with some base items in it; then be able to append that config file through a custom init method you use.
IE:
var configDefaults = module.exports = {
baseUrl: 'http://www.example.com/',
local: false,
};
Then in your custom command write something like:
"use strict";
var config = require('./config')
exports.command = function(urlModifier) {
var _self = this;
_self
.url(config.baseUrl+urlModifier)
.waitForElementVisible('body', 4000)
if( typeof callback === "function"){
callback.call(_self);
}
return this;
};