英文:
How to resize textarea in cypress
问题
如何在 Cypress 中调整文本区域大小。
我正在使用 cypress-real-events 插件与 HTML 元素进行交互。
我尝试调整文本区域的大小，但下面的代码不起作用。
cy.get("textarea").eq(0)
.realMouseDown({ position: "bottomRight" })
.realMouseUp({ position: "bottomRight" })
.realMouseDown({ position: "bottomRight" })
.realMouseMove(100, 100, { position: "bottomRight" })
.realMouseUp({ position: "bottomRight" });
英文:
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" });
答案1
得分: 4
尽管我昨天尝试使用JavaScript来解决问题，但我没有取得任何成功。
我认为这是因为textarea是浏览器内置的控件，没有正确的挂钩（方法或属性）来影响框的大小。
例如，我使用了一个本地HTML文件，其中只包含一个<textarea>。在本地运行可以避免需要在命令之间添加cy.wait(3000)的问题。
在这个本地测试中，没有异步元素，所有代码都立即生效。
这是依赖于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)
})
通过CSS通过测试
<textarea>可以使用浏览器的CSS引擎而不是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') // 使用CSS设置元素高度
cy.get('textarea').then(getHeight).as('end')
cy.get('@start').then(startingHeight => {
cy.get('@end').should('be.gt', startingHeight)
})
英文:
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)
})
<h3>Passing the test with CSS</h3>
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)
})
答案2
得分: 0
我升级了 cypress-real-events 到最新的 1.8.1 版本，并使用 realMouseWheel 事件来修复它。
以下是代码：
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 });
});
英文:
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 });
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论