Cypress - 如何通过文本内容查找?

问题描述 投票:0回答:7

在 Cypress 中,我想根据按钮的文本内容从一组按钮中选择一个按钮。我该怎么做?这是我的方法:

export const getCustomerButton = () => getNavigationSidenav()
  .find('mat-expansion-panel-header')
  .each(($el, index, $list) => {
    const text = $el.find('.mat-content > mat-panel-title').text();
    if (text === 'Customer') {
      return $el;
    }
    return null;
  });

我现在遇到的问题是我必须从元素数组中过滤掉空值。有没有更简单的方法?

javascript cypress end-to-end
7个回答
100
投票

此代码将生成带有

YOUR_BUTTON_CLASS
的 DOM 元素,其中包含文本“Customer”。这就是您要找的吗?

cy.get('.YOUR_BUTTON_CLASS').contains('Customer');

这里是 .contains

 cypress 命令的文档


48
投票

或者也许一个更巧妙的解决方案是使用这个:

cy.contains('YOUR_BUTTON_CLASS', 'Customer');

这是可以完成的,因为

contains()
可以容纳 2 个参数。如果它有两个参数,第一个参数始终是元素,第二个参数始终是文本。


42
投票

这里之前的答案中没有提到的另一个选项。

使用测试库/赛普拉斯测试库

安装完成后,直接在cypress中导入即可

commands.js
:

import '@testing-library/cypress/add-commands'

在你的测试中

cy.findAllByText("Jackie Chan").click();
cy.findByText("Button Text").should("exist");
cy.findByText("Non-existing Button Text").should("not.exist");
cy.findByLabelText("Label text", { timeout: 7000 }).should("exist");
cy.get("form").within(() => {
  cy.findByText("Button Text").should("exist");
});
cy.get("form").then((subject) => {
  cy.findByText("Button Text", { container: subject }).should("exist");
});

这非常简单且易于使用。我们在生产站点中使用它以及反应测试库。强烈推荐:)


35
投票

接受的答案“可以”工作。但是:如果该元素在第一次尝试时不可见,则在后续重试中也找不到该元素。

参见:https://github.com/cypress-io/cypress/issues/3745

Cypress 使用“Sizzle”作为选择器库 - 所以这样:

cy.get('button:contains("FooBar")')`

可以重试。


11
投票

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

语法:

cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)

示例:

cy.contains('button', 'Customer')
cy.contains('.buttonClass', 'Customer')
cy.get('button:contains("Customer")')
cy.contains('Customer')

0
投票

最简单的方法是:

cy.get('Button_Class').contains('Button_Text')

就您而言,解决方案是:

cy.get('.mat-content > mat-panel-title').contains('Customer')

有相关文档这里


0
投票

虽然

cy.contains('selector', 'text')
cy.get('selector').contains('text')
都是有效的解决方案,但了解它们之间的区别很重要。

cy.contains()
将生成与您的选择器匹配并包含文本的元素,而
cy.get().contains()
将生成直接包含文本的选择器中的元素 within

示例

命令

cy.get('div').contains('sample text')

 将产生 
span
 元素,而 
cy.contains('div', 'sample text')
 命令将产生 
div
 元素

<div> <span> sample text </span> </div>
    
© www.soinside.com 2019 - 2024. All rights reserved.