Cypress, encountering issues with If/Else or Switch Case implementations

Question

Cypress, encountering issues with If/Else or Switch Case implementations

My current challenge involves adding else if / switch case in my test. The issue I am facing is that when the initial 'if' condition fails, it does not go into the else if statement. This problem persists in both else if statements and switch cases.

module.exports.selectEnviroment = function(env) {
  switch (env) {
    case 'alpha':
      cy.get('[role="presentation"]')
        .find('[href="#/company-detail/5bb3765e64f66ca0027e15245"]')
        .click();
      break;
    case 'beta':
      cy.get('[role="presentation"]')
        .find('[ng-href="#/company-detail/5bb62c019ee36000273a6e2b"]')
        .eq(0)
        .click();
      break;
  }
}

When it comes to selecting the appropriate case based on the environment, it seems to encounter a problem where it doesn't do so as expected.

it('Booking should be done using invoice', () => {
  cy.visit(`${blah_URL}#/xyz/`);
  let env = blah.split('.')[1];
  selectEnviroment(env);
});

The situation arises when switching between different cases based on the environment selection.

if (cy.get('[role="presentation"]').find('[ng-href="#/company-detail/5bb62c019ee36000273a6e2b"]')) {
  cy.get('[role="presentation"]')
    .find('[ng-href="#/company-detail/5bb62c019ee36000273a6e2b"]')
    .eq(0)
    .click();
} //alpha
else if (cy.get('[role="presentation"]').find('[ng-href="#/company-detail/5bae05a39af4a90027fcdf43"]')) {
  cy.get('[role="presentation"]')
    .find('[ng-href="#/company-detail/5bae05a39af4a90027fcdf43"]')
    .eq(0)
    .click();
} //QA
else if (cy.get('[role="presentation"]').find('[ng-href="#/company-detail/5b855022323d37000f48bcdc"]')) {
  cy.get('[role="presentation"]')
    .find('[ng-href="#/company-detail/5b855022323d37000f48bcdc"]')
    .eq(0)
    .click();
} //Gamma
else if (cy.get('[role="presentation"]').find('[ng-href="#/company-detail/5bb62ccf5cb043002737d929"]')) {
  cy.get('[role="presentation"]')
    .find('[ng-href="#/company-detail/5bb62ccf5cb043002737d929"]')
    .eq(0)
    .click();
}

it('flight booking should be done using new credit card', () => {
  cy.visit(`${COCKPIT_URL}#/company-list/`);
  selectEnviroment();
});

Check out this failure message for reference

javascript cypress

Answer 1

Answer №1

When utilizing Cypress commands, it's important to understand that they do not immediately produce results. Instead, calling a Cypress function adds a command to be executed at a later time.

The .then() method was designed for situations like this, allowing you to add code to execute right after the preceding command in the chain:

cy.get('.myDiv').then(elem => {
    // elem is a jQuery object
    console.log(elem.text());
    if (elem.text() == 'Some text') {
        // perform an action
    else {
        // ...
    }
}

I highly recommend exploring the introductory guide to Cypress in the documentation. Understanding how Cypress operates is crucial for writing effective Cypress code, as it differs from other testing frameworks.

Answer 2

When utilizing Cypress commands, it's important to understand that they do not immediately produce results. Instead, calling a Cypress function adds a command to be executed at a later time.

The .then() method was designed for situations like this, allowing you to add code to execute right after the preceding command in the chain:

cy.get('.myDiv').then(elem => {
    // elem is a jQuery object
    console.log(elem.text());
    if (elem.text() == 'Some text') {
        // perform an action
    else {
        // ...
    }
}

I highly recommend exploring the introductory guide to Cypress in the documentation. Understanding how Cypress operates is crucial for writing effective Cypress code, as it differs from other testing frameworks.

Answer 3

Answer №2

Although it may not be directly related, switching between environments can be achieved by following the steps below:

1. Navigate to Cypress/plugin/index.js and insert the code snippet provided:

const envConfig = require('../support/config');

/* eslint-disable no-param-reassign */
module.exports = (on, config) => {
  config.baseUrl = envConfig(config.env.APP_ENV).baseUrl;

  return config;
}

Create a new file named "config.js" within the cypress/support directory, then add the content below:

`const config = { prod: { baseUrl: '' }, qa: { baseUrl: '' }, dev: { baseUrl: 'http://localhost:8080' } }

module.exports = typeof Cypress !== 'undefined' ? config[Cypress.env('APP_ENV')] : env => config[env];`

In the cypress/commands folder, utilize this method for login functionality:

Cypress.Commands.add('login', (username, password) => {
      cy.visit(Cypress.config('baseUrl'))
      cy.url().then(url => {
        if (
          url.indexOf('authorization.oauth2') !== -1 ||
          url.indexOf('auth-corp-aws') !== -1
        ) {
          cy.get('#username').type(Cypress.env('auth_username'))
          cy.get('#password').type(Cypress.env('auth_password'), { log: false })
          cy.get('.ping-button.normal.allow').click()
          cy.wait(1000)
        }
      })
    })

To execute tests in different environments, use the following commands:

"cy:e2e:qa_env": "CYPRESS_APP_ENV=qa cypress run --headed --browser chrome",
       "cy:e2e:dev_env": "CYPRESS_APP_ENV=dev cypress run --headed --browser chrome",
       "cy:e2e:prod_env": "CYPRESS_APP_ENV=prod cypress run --headed --browser chrome",

Answer 4

Although it may not be directly related, switching between environments can be achieved by following the steps below:

1. Navigate to Cypress/plugin/index.js and insert the code snippet provided:

const envConfig = require('../support/config');

/* eslint-disable no-param-reassign */
module.exports = (on, config) => {
  config.baseUrl = envConfig(config.env.APP_ENV).baseUrl;

  return config;
}

Create a new file named "config.js" within the cypress/support directory, then add the content below:

`const config = { prod: { baseUrl: '' }, qa: { baseUrl: '' }, dev: { baseUrl: 'http://localhost:8080' } }

module.exports = typeof Cypress !== 'undefined' ? config[Cypress.env('APP_ENV')] : env => config[env];`

In the cypress/commands folder, utilize this method for login functionality:

Cypress.Commands.add('login', (username, password) => {
      cy.visit(Cypress.config('baseUrl'))
      cy.url().then(url => {
        if (
          url.indexOf('authorization.oauth2') !== -1 ||
          url.indexOf('auth-corp-aws') !== -1
        ) {
          cy.get('#username').type(Cypress.env('auth_username'))
          cy.get('#password').type(Cypress.env('auth_password'), { log: false })
          cy.get('.ping-button.normal.allow').click()
          cy.wait(1000)
        }
      })
    })

To execute tests in different environments, use the following commands:

"cy:e2e:qa_env": "CYPRESS_APP_ENV=qa cypress run --headed --browser chrome",
       "cy:e2e:dev_env": "CYPRESS_APP_ENV=dev cypress run --headed --browser chrome",
       "cy:e2e:prod_env": "CYPRESS_APP_ENV=prod cypress run --headed --browser chrome",

Answer 5

Answer №3

it('performs a different action depending on the button's class', () => {
  // RUN THIS TEST MULTIPLE TIMES
  // IT MAY RETURN TRUE OR FALSE.

cy.get('button').then(($btn) => {
   if ($btn.hasClass('active')) {
   // do something when active
   } else {
   // do something else
   }
 })
})

If your element displays random text such as Initiated and Completed, you can handle it this way:

cy.get('.value-text').then($el => {
        // $el is a jQuery object
        console.log($el.text());
        if ($el.text() == 'Initiated') {
 
            cy.get('.edit_status > #cg-icon').click()
        } else {
             // Perform another action here.
        }
    })

Answer 6

it('performs a different action depending on the button's class', () => {
  // RUN THIS TEST MULTIPLE TIMES
  // IT MAY RETURN TRUE OR FALSE.

cy.get('button').then(($btn) => {
   if ($btn.hasClass('active')) {
   // do something when active
   } else {
   // do something else
   }
 })
})

If your element displays random text such as Initiated and Completed, you can handle it this way:

cy.get('.value-text').then($el => {
        // $el is a jQuery object
        console.log($el.text());
        if ($el.text() == 'Initiated') {
 
            cy.get('.edit_status > #cg-icon').click()
        } else {
             // Perform another action here.
        }
    })

Cypress, encountering issues with If/Else or Switch Case implementations

Answer №1

Answer №2

Answer №3

Similar questions

Error occurred due to an improperly formatted authorization header while attempting to upload an object to S3 using the JavaScript SDK

Updating an array in JavaScript with a dynamically generated key name while working in the ReactJS framework

NodeJS: Speed up your workflow by compressing video files

Having trouble importing a React component from a different directory?

Exploring an XML document with HTML

Javascript promises executing in a mixed-up sequence

Ensure the left and right screen widgets remain fixed in their positions as the user scrolls down the page using the spacebar

What could be causing getStaticProps to receive an incorrect slug value?

What is the best way to integrate JavaScript and Python for seamless collaboration?

`Shifting a spherical object from point A to point B along its axis`

Unable to retrieve Objects from JSON

Passing a Javascript variable to the NAME attribute of an HTML <a href> tag: Steps to do it efficiently

Picture is not showing up on my MVC software

Purging information from JavaScript object

Top technique for creating an XMLHttpRequest instance

Stopping Angular Route Alteration Depending on Routing Conditions

Improving Javascript Arrays for Easier Reading

Enabling the acceptance of blank values within an HTML5 date input field

Font in Three JS not loading properly

The button remains active in Internet Explorer 10 and cannot be disabled