Question 195018 in Html Question posted in
Some basic documentation can be found here.

Html – How to resize textarea in cypress

How to resize the textarea in Cypress.

I’m using cypress-real-events plugin to interact with html elements.

I’ve to resize the textarea and tried below code but its not working.

cy.get("textarea").eq(0)
  .realMouseDown({ position: "bottomRight" })
  .realMouseUp({ position: "bottomRight" })
  .realMouseDown({ position: "bottomRight" })
  .realMouseMove(100, 100, { position: "bottomRight" })
  .realMouseUp({ position: "bottomRight" });
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I upgraded cypress-real-events to latest 1.8.1 version and used realMouseWheel event to fixed it.

    Below is the code:

    it("textarea resize", () => {
  cy.visit("https://www.w3docs.com/snippets/html/how-to-set-the-size-of-the-textarea-element.html").wait(10000)

  cy.get(`textarea`).eq(0)
        .realHover()
        .wait(3000)
        .realMouseDown({ position: "bottomRight", scrollBehavior: false })
        .wait(3000)
        .realMouseWheel({ deltaY: 100 })
        .wait(3000)
        .realMouseUp({ position: "bottomRight", scrollBehavior: false });
});

  2. 0

    Although I tried yesterday to get a solution using javascript, I could not get any success.

    I think that’s because the textarea is a control that is built into the browser and does not have correct hooks (methods or properties) to affect the sizing of the box.

    For example, I used a local HTML file which just has a <textarea>. Running local avoids the issues for which puneet had to add cy.wait(3000) in between commands.

    With this local test, there is no asynchronous element and all the code takes effect immediately.

    This is the failing test which relies on javascript.

    cy.visit('/')

const getHeight = ($el) => $el[0].getBoundingClientRect().height;   // helper

cy.get(`textarea`).then(getHeight).as('start')

cy.get(`textarea`) 
  .realHover()
  .realMouseDown({ position: "bottomRight", scrollBehavior: false })
  .realMouseWheel({ deltaY: 100 })
  .realMouseUp({ position: "bottomRight", scrollBehavior: false })

cy.get(`textarea`).then(getHeight).as('end')

cy.get('@start').then(startingHeight => {
  cy.get('@end').should('be.gt', startingHeight)
})

    enter image description here

    Passing the test with CSS

    The <textarea> can be resized with the browser CSS engine instead of javascript.

    cy.visit('/');

const getHeight = ($el) => $el[0].getBoundingClientRect().height;   // helper

cy.get(`textarea`).then(getHeight).as('start')

cy.get(`textarea`)
  .then($ta => $ta[0].style.height = '500px')  // use CSS to set the element height

cy.get(`textarea`).then(getHeight).as('end')

cy.get('@start').then(startingHeight => {
  cy.get('@end').should('be.gt', startingHeight)
})

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search