CODEWITHSUNDEEP
javascriptcypressvisual-testingapplitools
Xev
Xev

Reputation: 127

How to capture scrolled into view element with Cypress and Applitools?

When I view my step in Applitools, it didn't capture the view where I scrolled into. It just captured the top of the page. How can I retain the scrolled view until it's captured in applitools? I've tried this code I've seen from the net, but nothing happened, not sure if I just didn't place it correctly in my code: eyes.check("test", Target.Region(By.id("scrollable_element")).fully());

My step definition is something like this:

beforeEach(() => {
    cy.eyesOpen({
        appName: "Test App",
        testName: Cypress.currentTest.title,
    });
});

Then("user can view a {string}", (chart) => {
  cy.visit("/");
  cy.loginUser();
  cy.navigateToChartsPage();
  cy.contains("chart").scrollIntoView();
    cy.eyesCheckWindow({
      tag: chart + " chart",
    });
});

afterEach(() => {
    cy.eyesClose();
});

Upvotes: 0

Views: 61

Answers (1)

MJApplitools
MJApplitools

Reputation: 71

This is Chris from Applitools support.

Under the hood, the Cypress SDK uses the Ultrafast Grid. By design, windowed viewport screenshots can only be captured from the top of the page.

In your case, I would recommend capturing a region screenshot.

Here's an example that should get you started:

  cy.eyesCheckWindow({
      tag: chart + " chart",
      target: 'region',
      selector: 'REPLACE_WITH_CHART_SELECTOR'
    });

https://applitools.com/tutorials/quickstart/web/cypress/checkpoints#region

If the chart you're capturing is scrollable, you can capture the full element by adding fully: true as an option:

cy.eyesCheckWindow({
    target: 'region',
    selector: 'REPLACE_WITH_CHART_SELECTOR',
    fully: true
});

Upvotes: 1

Related Questions