How to use firefoxUtil.setupMarionette method in Cypress

Instead of putting the loop inside the test, you could put it in the outer space as following

var i = 0;
for (i = 0; i < 3 ; i++) {     
  describe('Verify "Login" is visible. Test: '+i, function() {
    it('finds the Login link in the header', function() {

      //Place code inside the loop that you want to repeat

    })
  })
}

The Result will be the following:

• Verify "Login" is visible. Test: 0
• finds the Login link in the header
• Verify "Login" is visible. Test: 1
• finds the Login link in the header
• Verify "Login" is visible. Test: 2
• finds the Login link in the header

We experienced the same error. It was caused by an import of the cypress module. I guess this module is not intended to be imported in files which are loaded in the browser.

You can use the plugin cypress-keycloak to achieve this.

After installing go to cypress/support/commands.js and write:

// Using ES6
import 'cypress-keycloak';

OR

// using CommonJS
require('cypress-keycloak');

Then in your tests you can write (Example taken from cypress-keycloak npm page) :

describe('thing', () => {
  beforeEach(() => {
    cy.login({
      root: 'https://keycloak.babangsund.com',
      realm: 'stage',
      username: 'babangsund',
      password: 'bacon',
      client_id: 'frontend',
      redirect_uri: 'https://babangsund.com/',
    });

    // or login with OTP
    cy.loginOTP({
      root: 'https://keycloak.babangsund.com',
      realm: 'stage',
      username: 'babangsund',
      password: 'bacon',
      client_id: 'frontend',
      redirect_uri: 'https://babangsund.com/',
      otp_secret: 'OZLDC2HZKM3QUC...', // e.g. 32 chars
      otp_credential_id: '5e231f20-8ca7-35e1-20a694b60181ca9', // e.g. 36 chars
    });
  });

  afterEach(() => {
    cy.logout({
      root: 'https://keycloak.babangsund.com',
      realm: 'stage',
      redirect_uri: 'https://babangsund.com/',
    });
  });
});

I don't know if there's a way to do it from the user interface, but you can use mocha methods to run only chosen tests by:

1. Replacing it with xit tests you want to omit
2. Using it.skip on tests you want to omit
3. Using it.only on single test you want to run

To skip entire context/describe suite use context.skip() or describe.skip() which are identical.

You can use jQuery's contains selector to find the desired h1 based on text inside it. Once h1 is found, just select its parent which will be your anchor.

let targetH1 = $('a h1:contains("Visit Site")');

console.log(targetH1.parent()); // this will give you the anchor element

You can create a folder called page-objects inside your integration folder. Inside that you can create one js file for each screen like login.js. Now inside that you can write your locators like:

class login {
    usernameInput() {
        return cy.get('[type=text]')
    }
    passwordInput() {
        return cy.get('[type=password]')
    }
    submitButton() {
        return cy.get('[type=submit]')
    }
}
export default login

Inside your tests you can use them as:

import login from '/page-objects/login.js'
const loginPage = new login();

describe('Test_spec_1', function() {
    it('Visits the site & verifies elements', function() {
        loginPage.usernameInput().should('be.visible')
        loginPage.passwordInput().should('be.visible')
        loginPage.submitButton().should('be.visible')
    })
})

An example is given here Get Data URL of an image, but the image url is out of date - I substituted the one from Cypress Github page.

Key is to add encoding to the request

cy.request({
  url: 'https://cloud.githubusercontent.com/assets/1268976/20607953/d7ae489c-b24a-11e6-9cc4-91c6c74c5e88.png',
  encoding: 'base64',
}).then((response) => {

  // test any response properties here

  const base64Content = response.body
  const mime = response.headers['content-type'] // or 'image/png'
  expect(mime).to.eq('image/png')

  // see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
  const imageDataUrl = `data:${mime};base64,${base64Content}`
  return imageDataUrl
})
.then((imageDataUrl) => {

  // display the image in Cypress test runner

  cy.window().its('document.body')
  .then($body => {
    $body[0].innerHTML = `<img src="${imageDataUrl}"  height="100" width="300" />`
  })
})

Does this button has different text? if yes, then use

cy.get('.sidebar--button').contains('whatever the text is').click()

Cypress.minimatch is a tool that can be used for checking the route matchers.

By default Cypress uses minimatch to test glob patterns against request URLs.

If you’re struggling with writing the correct pattern you can iterate much faster by testing directly in your Developer Tools console.

The two routes you show in the question actually pass the minimatch test.

const url = 'http://example/student/details.php?viewDetails=project&stdCount=1&sectionID=1&openHash=5fc8329a76e73&ajaxCall=true';

const pattern1 = '**/student/details.php?viewDetails=project&stdCount=1&sectionID=1&openHash=**';
console.log( Cypress.minimatch(url, pattern1) );  // true

const pattern2 = '**/student/details.php?viewDetails=project&stdCount=1&sectionID=1&openHash=**&ajaxCall=true**';
console.log( Cypress.minimatch(url, pattern2) );  // true

Here is a Cypress fiddle that shows how to use the new intercept method to handle query parameters.

/// <reference types="@cypress/fiddle" />

const test = {
  html: `
    <p class="text-lg"></p>
    <script>
      setTimeout(() => {
        const url = 'http://example/student/details.php?viewDetails=project&stdCount=1&sectionID=1&openHash=5fc8329a76e73&ajaxCall=true';
        window.fetch(url, { method: 'POST'});
      }, 1000);
    </script>
  `,
  test: `
  cy.intercept({
    method: 'POST',
    url: '/student/details.php',
    query: {
      viewDetails: 'project',   // whatever query parts you care about
      stdCount: '1',
      sectionID: '1'
    }
  }, {})                 // Added an empty stub here, as my url does not actually exist
  .as('getStudentTabDetails');
  cy.wait('@getStudentTabDetails')
  `
}

it('', () => {
  cy.runExample(test)
});

The POST is made with native fetch(), which would not be captured in the old cy.route() method without using a polyfill.