How to use startInfoAndSnapshot method in Cypress

I stuck with similar issue using cy.scrollTo() on an Angular app with a lot of animation. Cypress proceeds to next commands before the scrolling is finished. I tried many combinations and found adding following options/values worked. These options can be used in scrollIntoView() too:

• easing (the easing animation): linear
• duration (Scrolls over the duration (in ms)): 100

The actual code looklikes this

cy.scrollTo('bottom', { easing: 'linear',duration: 100 }).then(() => { 
    // commands need to be executed after the scrolling is finished
});

To do this I'm using wrap() to return a Chainable containing the value I want to return.

Module

function foo() {
  return cy.wrap('foo');
}

Cypress.Commands.add('foo', foo);

Test File

cy.foo().then(value => console.log(value)); // foo

Since wrap() is returning a Cypress.Chainable, we can call .then() on our commands. What ever is passed into wrap() is yielded to the next command.

See also: Cypress wrap() documentation

Imports are relative to the test which is in the integration folder, so you want

import { LoginPageAdminPortal } from './pageobject/LoginPageAdminPortal';

That doesn't work out of the box, the logged issue for that is https://github.com/cypress-io/cypress/issues/845 . But in that same ticket is also a work around available using the native drag and drop API with draggable attribute on draggable elements:

Create a custom command

Cypress.Commands.add("dragTo", { prevSubject: "element" }, (subject, targetEl) => {
    cy.wrap(subject).trigger("dragstart");
    cy.get(targetEl).trigger("drop");
  }
);

In the testscript you can use:

cy.get(".source").dragTo(".target");

As suggested at https://github.com/vuejs/vue-test-utils-next/issues/194#issuecomment-695333180

Changing the shim to the below fixes the issue.

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent;
  export default component;
}

Install glob and use it in place of fs.existsSync()

plugins/index.js

...
const glob = require("glob");

const findDownloadedFile = (filename) => {
  const matches = glob.sync(fileName);
  return (matches.length > 0);
}

test

// partial name
cy.task('isExistDownloadedFile', '*.pdf').should('equal', true)

// still works with full name
cy.task('isExistDownloadedFile', 'TEST.pdf').should('equal', true)

I want to extract the balance at the beginning of the test

Comparing two numeric values, use a .then() to remove the currency and convert.

The .then() command is a useful way to apply javascript transforms to a value in a chain of Cypress commands.

cy.get('[data-testid="wallet"]')   
  .invoke('text')                                 // get text  "100 kr"
  .then(text => +text.replace('kr', '').trim())   // remove currency and convert
  .then(initial => {

    // spend 25 kr

    cy.get('[data-testid="wallet"]')
      .invoke('text')
      .then(text => +text.replace('kr', '').trim())
      .should('eq', initial - 25)
})

Since some of the code is repeated (and you will want other similar tests), bundle it up in a custom command

Cypress.Commands.add('currency', (selector) => {
  cy.get(selector)   
    .invoke('text')                                  // get text
    .then(text => +text.replace('kr', '').trim())    // remove currency and convert
})


cy.currency('[data-testid="wallet"]')
  .then(initial => {

    // spend 25 kr

    cy.currency('[data-testid="wallet"]')
      .should('eq', initial - 25)
  })

Note .invoke('text') extracts all text in the selected element and child elements.

If there are more children of the wallet than just the value, e.g

<div data-testid="wallet">
  <div>Amount: </div>
  <div class="css-3ro84u">100 kr</div>
</div>

you can add a .filter() to pick the currency child

Cypress.Commands.add('currency', (selector) => {
  cy.get(selector)   
    .children()
    .filter((index, child) => child.innerText.includes('kr'))   // filter
    .invoke('text')                                
    .then(text => +text.replace('kr', '').trim())               // convert
})

Your route should point to just the path, not the full URL. Try changing it to cy.route("/admin/portfolio/putstrategy").as("updatetrategy")

I'm assuming it's just a snippet from your test, but if you don't have cy.server() before you call into cy.route(), you'll need to add that as well.

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: