CODEWITHSUNDEEP
cypress
Alexander Gorelik
Alexander Gorelik

Reputation: 4385

Cypress check is element has scroll bar visible

I have list that should have 10 elements, if the list contains 11 elements i need to show scroll, the container is fixed size. Everything is ok but how i can check that scroll is exist?

cy.get('[data-testid=list-box]')

Upvotes: 8

Views: 7274

Answers (5)

Samoth
Samoth

Reputation: 1707

If your parent container has a style of overflow-y: auto, you can use:

cy.get('[data-testid=list-box]').parent()
  .then($scrollBox => 
        expect($scrollBox[0].clientHeight)
               .to.be.lessThan($scrollBox[0].scrollHeight));

as these two properties would be equal if there is no scrollbar visible, but scrollHeight would be larger than clientHeight if the scrollbar is shown.

Upvotes: 0

Alter
Alter

Reputation: 23

Here I'm getting the last element. Then used cypress scrollIntoView() to scroll to that last element. And using should() to see it's visible or not.

cy.get('Selector')
  .last()
  .within(($element) => {
    if (!$element.is(':visible')) {
      cy.wrap($element).scrollIntoView();
    }})
  .should('be.visible');

Upvotes: 0

Akshay Vijay Jain
Akshay Vijay Jain

Reputation: 15935

Basically, we get the element from the jquery wrapper and then test if it is scrollable by comparing scrollWidth and actualWidth

export enum ScrollType {
    scrollable='scrollable',
    nonScrollable='non-scrollable',
}
export const isXScrollable = (element: HTMLElement) => {
    return element.scrollWidth > element.clientWidth
};
export const isYScrollable = (element: HTMLElement) => {
    return element.scrollHeight > element.clientHeight;
}
export const isScrollable = (element: HTMLElement) => {
    return isXScrollable(element) || isYScrollable(element)
}

describe('Test',() => {
it('check that max of only 4 lines to be shown in the text area, and then it should add the scroll', () => {
    mount(<Textarea defaultValue="Line 1" id="textbox-abc2" ></Textarea>);
    const textbox = cy.get('#textbox-abc2');
    textbox.type('{enter}Line 2{enter}Line 3{enter}Line 4');
    textbox.then(a => {
      const scrollable = isYScrollable(a[0]) ? ScrollType.scrollable: ScrollType.nonScrollable
      expect(scrollable).to.eq(ScrollType.nonScrollable);
    })
    textbox.type('{enter}Line 5');
    textbox.then(a => {
      const scrollable = isYScrollable(a[0]) ? ScrollType.scrollable: ScrollType.nonScrollable
      expect(scrollable).to.eq(ScrollType.scrollable);
    })
  })
})

Upvotes: -1

Jeff Fairley
Jeff Fairley

Reputation: 8314

I'm doing this by measuring the height and scrollHeight with jQuery.

  it("should force scroll within a large body", () => {
    cy.get(".lorem-ipsum-header").click();
    cy.get(".section-body")
      .should("have.length", 1)
      .eq(0)
      .should("contain.text", "Lorem ipsum")
      .then(($body) => {
        cy.wrap($body).invoke("outerHeight").should("eq", 583);
        cy.wrap($body).invoke("prop", "scrollHeight").should("eq", 1892);
      });
  });

Upvotes: 3

soccerway
soccerway

Reputation: 11951

You could get the count of elements and if the length of the list is less than or equal to 10 do some action, else check for the visibility of scrollbar. Please try below test and let me know

it('Check the length of the list', () => {
        cy.get('[data-testid=list-box]')
            .then(list => {
            const listCount = Cypress.$(list).length;
            if(listCount <= 10){
             // do some action if the list count is less than 10..
            }else{
              cy.get('#scrollbar_Id').should('be.visible');
            }

        });
    })

Upvotes: 0

Related Questions