Get Element by Content

在 Cypress 中可以通过字符串来查找和定位元素，常用的命令包括 get，find 等。这里以 get 命令为例，在其文档可以看到一些用法的说明。

JavaScript 中支持的 selector 在 get 中都是可以使用的，除此之外，文档指出所有 jQuery 支持的也同样支持。（事实上，在 Cypress 注册命令的代码处可以，可以找到和 DOM 相关的代码，这部分代码中不难发现 jQuery 的影子）。

有了 jQuery 的强力支持，就可以写出复杂的选择条件。比如，选取含有某一文案的 HTML 组件。

在 jQuery 中，提供了 :contains 这个选择器（文档），可以找出所有包含某一指定字符串的所有元素。

于是，想要找出弹出层中的 Submit 按钮，就可以这么写：

Cypress.get('[role=dialog] button:contains("Submit")')

这里，使用了 [role=dialog] 来找到弹出层（dialog 相关的介绍可以看 MDN），然后再通过 button 找到按钮，最后用 :contains("Submit") 来找到 Submit 按钮。

当然，如果一个产品本身支持 i18n，那么 :contains 后面的部分就不好写了。一个可行的方案，是通过当前页面的语言，从一组文案中找到合适的文案，再调用 :contains 选择器。比如，写一个简单的 Cypress 命令，如下：

Cypress.Commands.add('getByText', (query, texts) =>
  cy.get('html').first().then(html => {
    const { lang } = html;
    return cy.get(`${query}:contains('${texts[lang]}')`);
  })
);

这里，通过 HTML 上的 lang 标记来确定当前页面所选用的语言（lang 的一些细节可以参考 MDN），然后再根据语言，从一组文案（即 texts 这个对象）中选取当前需要使用的文案。

命令的使用方法：

cy.getByText('[role=dialog] button', { en: 'Submit', zh: '提交' })
  .first()
  .click();