如何像使用 Chrome 开发者控制台那样使用 querySelectorAll select 正确的元素？

Question

我目前正在使用 cypress 测试 salesforce，我运行遇到了某种情况，我不知道将在机会中创建它的派对记录 ID。这意味着我必须找到 select 特定派对记录的解决方法才能编辑文件。

如果我使用 Chrome 工具或在 cypress 中执行以下操作，我可以调用该元素，但它不会打开或单击任何内容：

       cy.document().then((doc) => {
                const edit = doc.querySelectorAll("a")[41]
                const click = doc.querySelectorAll("a")[42]
                edit.click()
                click.click()

            })

问题是cypress没有点击，无法前进。有谁知道我们在这些情况下可以做什么？

这是向下箭头元素：

Answer 1

您可以使用 each() 遍历所有下拉菜单并根据索引执行 click() ，例如：

cy.get('svg[data-key="down"]').each(($ele, index) => {
  if (index == 2) { //For second down arrow 
    cy.wrap($ele).click() //Clicks the second down arrow
    //Do Something else
  }
})

如果正常点击不起作用，您可以使用 click({force: true})。

或者，如果上面的方法不起作用，那么我想你有那么你必须使用 shadow() 进入阴影 dom 然后执行 click() -

cy.get('svg[data-key="down"]').each(($ele, index) => {
  if (index == 2) {
    cy.wrap($ele).shadow().find('svg#down').click()
    //Do Something else
  }
})

Answer 2

您可以使用eq()直接获取第二个下拉菜单并对其执行click()。

cy.get('svg[data-key="down"]')             // select all dropdowns
  .eq(1)                                   // select the second
  .click();

或者您可能需要定位 <use href...> 元素，

cy.get('svg[data-key="down"]')             // select all dropdowns
  .eq(1)                                   // select the second
  .find('use')                             // since this element has the href
  .click();

如何像使用 Chrome 开发者控制台那样使用 querySelectorAll select 正确的元素？

How do I select the right elements with querySelectorAll as I do by using the Chrome developers console?

testing

automation

salesforce

cypress