使用 cy.get 和 cypress/javascript 输入 html 框找不到 ID

Question

我是 cypress/html 的新手，我正在尝试在以下地址框中键入地址

 <input type="text" title="Street Address 1" name="billing[street][]" id="billing:street1" value="" class="input-text " autocomplete="address-line1">

所以我想做的是在这个框中输入一些东西所以我写

cy.get('#billing:street1').type('1322 the gulag archipelago')

但是我在 cypress 中收到以下错误：

预计会找到“#billing:street1”，但从未找到。

所以我的问题是为什么这不起作用，因为我之前已经完成了这个 .get by id 并且它已经起作用了。

编辑：可能是我需要使用 'billing:street1' 或类似的东西来指定 : 的含义。 我专门试过这个，但没有用。

先感谢您。

Answer 1

有多种方法可以做到这一点。

使用元素标签本身：

cy.get('input').type('1322 the gulag archipelago');

使用属性标签之一：

cy.get('[title="Street Address 1"'].type('1322 the gulag archipelago');

cy.get('[id="billing:street1"]).type('1322 the gulag archipelago');

cy.get('[class="input-text "]').type('1322 the gulag archipelago');

从表单元素中：

cy.get('[sample-form-id="ExampleAddressForm"]').within(() => {
    cy.get('input').type('1322 the gulag archipelago');
});

如果这是页面上的第三个输入：

cy.get('input').then((inputs) => {
    cy.get(inputs[3]).type('1322 the gulag archipelago');
});

Answer 2

所以这就是我如何让它工作我可以使用类似 jQuery 的命令来查询标题这实际上更健壮，因为可以更改 id 但很可能标题不会因此命令

cy.get('[title|="Street Address 1"]').type('1322 the gulag archipelago')

效果很好，因为您几乎可以在 cypress 中执行所有 jQuery 操作。