i am trying to integrate cypress and 1password together for safer automated testing. i have one test where i login, navigate, logout of the platform then move to archive and play money for nothing. i would like to do the same test using environment variables where i fetch the necessary login data from 1password. however the test runs early into an error and does not fetch my credentials.
running: "source ./fetchCredentials.sh echo $CYPRESS_EMAIL echo $CYPRESS_PASSWORD" i do in fact get the right credentials.
i have also added the block below to the json file.
{
"scripts": {
"cy:run": "source ./fetchCredentials.sh && cypress run",
"cy:open": "source ./fetchCredentials.sh && cypress open"
}
}
my sh file to fetch the credentials
#!/bin/bash
# Fetch the email and password from 1Password using the 1Password CLI
email=$(op item get "Mogeniusßß" --vault="Employee" --fields username)
password=$(op item get "Mogeniusßß" --vault="Employee" --fields password)
# Check if the credentials were fetched successfully
if [ -z "$email" ] || [ -z "$password" ]; then
echo "Failed to fetch credentials from 1Password. Please ensure the item exists and the 1Password CLI is logged in."
exit 1
fi
# Export the fetched credentials as environment variables
export CYPRESS_EMAIL=$email
export CYPRESS_PASSWORD=$password
for reference this is the first test that runs smoothly, which doesnt use env variables
describe('Login to Mogenius, perform actions, and then play a song', () => {
it('should log in, handle cookie consent, navigate, and log out of Mogenius', () => {
// Your actual login credentials
const email = '**********************';
const password = '********************';
// Visit the login page
cy.visit('https://app.dev.mogenius.com/user/login');
// Handle "Accept & Close" cookie consent button if it appears
cy.get('button#ppms_cm_agree-to-all').then(($btn) => {
if ($btn.is(':visible')) {
cy.wrap($btn).click(); // Click the "Accept & Close" button
}
});
// Enter the email using the placeholder attributex
cy.get('input[placeholder="Email"]').type(email);
// Enter the password using the placeholder attribute
cy.get('input[placeholder="Password"]').type(password);
// Click the login button
cy.get('button[type="submit"]').click();
// Assert that the login was successful by checking the URL or some element that appears after login
cy.url().should('include', 'https://app.dev.mogenius.com/studio/settings/organizations');
// Wait for the DemoOrg element to be visible and click it
cy.get('span.fw-bold.me-auto.text-truncate.flex-shrink-1').contains('DemoOrg').should('be.visible').click();
// Assert that the URL has changed to the DemoOrg page
cy.url().should('include', '/studio/organization/35bdd042-fcb7-4afd-af03-9feffe1dbae1');
// Wait for the JanGKE project element to be visible and click it
cy.get('span.h6.text-truncate').contains('JanGKE').should('be.visible').click();
// Wait for the EY element to be visible and click it
cy.get('div.container').contains('EY').should('be.visible').click();
// Wait for the Logout element to be visible and click it
cy.get('a.dropdown-item').contains('Logout').should('be.visible').click();
// Optionally, assert that the URL has changed to the login page
cy.url().should('include', 'app.dev.mogenius.com/user/login');
});
it('play Money for Nothing', {includeShadowDom: true, scrollBehavior: false}, () => {
// Set preferable screen resolution
cy.viewport(1500, 1500);
// Page base URL
cy.visit('https://archive.org/details/10.-telegraph-road-live-remix_202303');
// Handle any cookie consent or similar pop-ups on this page if they exist
//cy.get('button#ppms_cm_agree-to-all').then(($btn) => {
//if ($btn.is(':visible')) {
// cy.wrap($btn).click(); // Click the "Accept & Close" button
// }
//});
// Play "Money For Nothing" - Track #11
cy.contains('button', 'Money For Nothing').click();
});
});
i expect, having provided the details above for cypress to run smoothly through my test which is as follows:
describe('Login to Mogenius, perform actions, and then play a song', () => {
it('should log in, handle cookie consent, navigate, and log out of Mogenius', () => {
// Use the credentials from the environment variables
const email = Cypress.env('CYPRESS_EMAIL');
const password = Cypress.env('CYPRESS_PASSWORD');
// Ensure the variables are correctly loaded
//if (!email || !password) {
//throw new Error('CYPRESS_EMAIL or CYPRESS_PASSWORD is not set');
//}
// Visit the login page
cy.visit('https://app.dev.mogenius.com/user/login');
// Handle "Accept & Close" cookie consent button if it appears
cy.get('button#ppms_cm_agree-to-all').then(($btn) => {
if ($btn.is(':visible')) {
cy.wrap($btn).click(); // Click the "Accept & Close" button
}
});
// Enter the email using the placeholder attribute
cy.get('input[placeholder="Email"]').type(email);
// Enter the password using the placeholder attribute
cy.get('input[placeholder="Password"]').type(password);
// Click the login button
cy.get('button[type="submit"]').click();
// Assert that the login was successful by checking the URL or some element that appears after login
cy.url().should('include', 'https://app.dev.mogenius.com/studio/settings/organizations');
// Wait for the DemoOrg element to be visible and click it
cy.get('span.fw-bold.me-auto.text-truncate.flex-shrink-1').contains('DemoOrg').should('be.visible').click();
// Assert that the URL has changed to the DemoOrg page
cy.url().should('include', '/studio/organization/35bdd042-fcb7-4afd-af03-9feffe1dbae1');
// Wait for the JanGKE project element to be visible and click it
cy.get('span.h6.text-truncate').contains('JanGKE').should('be.visible').click();
// Wait for the EY element to be visible and click it
cy.get('div.container').contains('EY').should('be.visible').click();
// Wait for the Logout element to be visible and click it
cy.get('a.dropdown-item').contains('Logout').should('be.visible').click();
// Optionally, assert that the URL has changed to the login page
cy.url().should('include', 'app.dev.mogenius.com/user/login');
});
it('play Money for Nothing', { includeShadowDom: true, scrollBehavior: false }, () => {
// Set preferable screen resolution
cy.viewport(1500, 1500);
// Page base URL
cy.visit('https://archive.org/details/10.-telegraph-road-live-remix_202303');
// Play "Money For Nothing" - Track #11
cy.contains('button', 'Money For Nothing').click();
});
});
unfortunately i get the following error:
6
type
(xhr)POST https://px.ads.linkedin.com/wa/
CypressError
cy.type() can only accept a string or number. You passed in: undefinedLearn more
cypress/e2e/1-getting-started/env2.cy.js:23:46
21 |
22 | // Enter the email using the placeholder attribute
> 23 | cy.get('input[placeholder="Email"]').type(email);
| ^
24 |
25 | // Enter the password using the placeholder attribute
26 | cy.get('input[placeholder="Password"]').type(password);
it is confusing that running : source ./fetchCredentials.sh
echo $CYPRESS_EMAIL
echo $CYPRESS_PASSWORD does give me the true credentials but somehow they dont get fetched during the test run.
help would be very much appreciated
From Overriding environment variables
Cypress automatically removes the leading
CYPRESS_orcypress_from any environment variable name specified in this way.
Therefore when setting CYPRESS_EMAIL & CYPRESS_PASSWORD externally, you want this in your test code:
const email = Cypress.env('EMAIL');
const password = Cypress.env('PASSWORD');