How to use convertSameSiteCdpToExtension method in Cypress

Solution 1:

You can use the wrap() method which yields the object passed as a param if it resolves like so:

context('Travel Portal Regression Test', () => {
  beforeEach(() => {
    cy.fixture('travelData').then((data) => cy.wrap(data).as('getTravelData'));
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.get('@getTravelData').then((res) => cy.log(res.FIRSTNAME));
  });
});

Solution 2:

You can declare a variable called travelData on the upper scope of your test spec & reassign its value to data received from the json file like so:

context('Travel Portal Regression Test', () => {
  let travelData;

  beforeEach(() => {
    cy.fixture('travelData').then((data) => {
      travelData = data;
      return travelData;
    });
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.log(travelData.FIRSTNAME);
  });
});

Here it's the screenshot with the test results:

I found some solutions.

Add reference

Put this at the top of each file test script

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

Eslint extension

• yarn add -D eslint-plugin-cypress (https://github.com/cypress-io/eslint-plugin-cypress)

• Add these lines to .eslintrc

{
  "extends": [
    "plugin:cypress/recommended"
  ]
}

Specify cy in eslintrc globals

{
  "globals": {
    "cy": true
  }
}

Add this to .eslintrc

cy is a global variable. Much like location. So really it is window.cy. You can add it to the globals in Eslint. Don't import cy from cypress.

Reference: ESLint: 'cy' is not defined (Cypress)

I've encountered this issue myself and we've tried many different things at work on our app. Even though it's something which needs to be adapted, we're quite happy with our current solution.

But before I get to the solution, let me explain why this is a hard problem to solve without simply having a long wait before we start testing.

First of all, we need to wait for our page to be ready. Luckily for us, Cypress does that for us.

Then, we could wait for Angular to be bootstraped. One way of being aware of that is by checking if getAllAngularRootElements is available on the window object. And yes this function is apparently there even in prod mode!

  cy.window()
    .its('getAllAngularRootElements' as any)
    .should('exist');

But this isn't a perfect solution especially if... You use lazy loading.

Just because Angular bootstraped your app doesn't mean all your lazy modules are loaded! And this is where it gets really unlikely to find an automatic way of waiting for exactly what you want to be ready.

So how do we start testing as soon as we can and in a safe way? In my opinion the best option to do so is to have a check after every cy.visit call and wait for one element around what you're about to test, to exist. Example:

cy.visit(`some-page`);

cy.get(
  '.some-class-around-what-I-want-to-test',
  { timeout: 15000 }
).should('exist');

// ... rest of the test goes here

The code above will load the page, wait for the element you're targetting to exist for a maximum of 15 seconds but the important thing to note is that as soon as this element is available, it'll consider that check successful and move on. So if your app takes 2 seconds to display that element, your tests will starts straight after!

If you want to make it less repetitive for all your tests, you can create a function to open a given page and wait for its content to be there before doing something else. Example:

// at the top of the test file
const openProfilePage = () => {
  cy.visit('profile');
  cy.get(
    '.profile',
    { timeout: 15000 }
  ).should('exist');
}

// in every tests after or in a before each
openProfilePage();

// test something else

Cypress' have.css uses chai-jquery which asserts computed value.

Thus, even though you've assigned translate(0%, 0px), it gets computed as none.

Alternatively, you could use assert like this:

cy.get('.myImage').should('have.attr', 'style').should('contain', 'transform: translate(0%, 0px)')

If I understand the question correctly you just have to change the URL you are visiting. In the cypress.json file try changing the baseURL to your desired entry point, in this case

    "baseUrl": "http://172.17.0.3/"

This way you can just

    cy.visit('/relativePathEtc') 

and will be prefixed with the baseUrl.

Source: https://docs.cypress.io/api/commands/visit#Prefixes

I don't know what's happened to the footer and the #id-count, but don't use it. Count the elements yourself

it('adds an item to the list', () => {

  cy.get('ul').then($list => {

    const initialCount = $list.find('li').length;
    expect(initialCount).to.eq(0)

    {Here add the item}

    // const afterAddingCount = $list.find('li').length;
    // expect(afterAddingCount).to.eq(1);

    // This is better
    cy.get('ul li')
      .should('have.length', 1);    // retry on this if animation, etc
     
  })
})

it('updates the todo-count display', () => {

  // show the HTML for the footer 
  // before and after adding an item
  // then can add a test here

})

I can't see why the original code doesn't work, it looks perfectly good (without a running system to play with).

But the "fix" variation is backwards - the last intercept that is set up is the first to match.

From the docs:

This diagram shows route5 being the first (non-middleware) route checked, followed by route3, then route1.

Also, since each intercept is intended to catch only one call, add { times: 1 }, to make it so.

Given('I log in', () => {
  cy.intercept('GET', `**/user/peers`, {times: 1})
    .as('Peers1')                                     // catches 2nd call
  cy.intercept('GET', `**/user/peers`, {times: 1})
    .as('Peers0')                                     // catches 1st call
})

You can see it in this screenshot

where Peers1 is matched first then Peers0, but the following block is expecting the reverse order

Then('the dashboard displays {int} peers', expectedPeersCount => {
  cy.wait(`@Peers${expectedPeersCount }`).then(xhr => {
      const peers = xhr.response.body
      expect(peers.length).to.eq(expectedPeersCount)
  });
})

Called with 0 by And the dashboard displays 0 peers and then called with 1 by Then the dashboard displays 1 peers

Dynamic aliases

You might be able to set the alias dynamically depending on how many peers are in the response.

Given('I log in', () => {
  cy.intercept('GET', `**/user/peers`, (req) => {
    req.continue().then(res => {
      if (re.body.length === 0) {
        req.alias = 'Peers0'
      }
      if (re.body.length === 1) {
        req.alias = 'Peers1'
      }
    })
  })
})

If this works, then you don't need to worry about the order of setup.

I take yield to mean 'pay it forward', whereas return = 'pay it back'.

See Core Concepts

Cypress commands are asynchronous and get queued for execution at a later time. During execution, subjects are yielded from one command to the next, and a lot of helpful Cypress code runs between each command to ensure everything is in order.

You can try a regular expression, see contains#Regular-Expression.

See this question Regular expression containing one word or another for some formats

I think something as simple as this will do it,

cy.get(el).contains(/submit|enviar/g)

Experiment first on Regex101 or similar online tester.

Maybe build it with

const runout = ['submit', 'enviar']
const regex = new RegExp(`${runout.join('|')}`, 'g')
cy.get(el).contains(regex)