Cypress:设置属性值
Posted
技术标签:
【中文标题】Cypress:设置属性值【英文标题】:Cypress: set attribute value 【发布时间】:2018-04-18 07:33:22 【问题描述】:我刚刚开始探索 Cypress,遇到了这样一个问题:是否可以像在 Selenium 中一样在 javascriptExecutor
的帮助下选择一个具体的属性并更改其值?例如,让我们来看看这段简单的代码
input id="mapsearch" type="textbox" class="form-control" name="address" test=""
是否可以获取测试属性并分配我自己的值?
【问题讨论】:
可以使用html5数据属性。数据测试=“测试”。然后你可以根据这个属性值来选择它。 【参考方案1】:是的。在赛普拉斯测试中,您可以在 JavaScript 中做的任何事情都是可能的。对于上面的 html,您可以在 Cypress 中使用 .invoke()
执行此操作:
cy.get('input[test]')
.invoke('attr', 'test', 'my new value')
.should('have.attr', 'test', 'my new value')
Cypress 在底层使用 jQuery,因此您可以像这样调用 jQuery 中的任何函数。您也可以在使用 .then()
产生输入后使用纯 JavaScript:
cy.get('input[test]').then(function($input)
$input[0].setAttribute('test', 'my new value')
)
.should('have.attr', 'test', 'my new value')
【讨论】:
【参考方案2】:虽然 Jennifer 的回答实际上适用于大多数输入元素,但有一个例外,尤其是当应用程序只接受 input/change event
上的输入值时,因为调用不会触发事件。
我有这样的经验,下面的代码对我有用。
在 Commands.js 中:
Cypress.Commands.add('inputChange', (input, value) =>
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype,
'value'
).set
const changeInputValue = inputToChange => newValue =>
nativeInputValueSetter.call(inputToChange[0], newValue)
inputToChange[0].dispatchEvent(new Event('input',
newValue,
bubbles: true,
composed: true
))
return cy.get(input).then(input =>
changeInputValue(input)(value)
)
)
在测试中:
cy.get('[data-test="voy-lat-long-input"]')
.then(input => cy.inputChange(input, Longtitude))
【讨论】:
您还应该能够在.invoke()
之后添加.trigger('change')
来触发更改事件(或者.trigger('input')
,如果它是您需要的输入事件)。
是的,这也是一种选择。这是我尝试的第一件事,但对我没有用。【参考方案3】:
你可以试试这个
cy.get('.class/#id').type('type your new value', force: true );
【讨论】:
.type() 为我输入输入,但随后挂起并超时。用力和不用力。以上是关于Cypress:设置属性值的主要内容,如果未能解决你的问题,请参考以下文章
Nx e2e cypress runner:来自 cypress.env.json 条目的值不会覆盖 cypress.json env 对象中的相同条目