我无法在 cypress 中找到元素，因为 css 选择器每次都在变化

Question

我正在使用此代码来定位元素以便单击它，但 jss403 每次都会更改

cy.get('.jss403 > .MuiButtonBase-root > .MuiButton-label').click()

如何更改定位策略，我刚开始在cypress，这是我的第一次测试。

Answer 1

请看Paper-Button always as upper case

按钮的材料设计规范规定文本应为大写

这意味着 DOM 中显示的文本是您应该搜索的内容

cy.contains('.MuiButton-label', 'text in same case as DOM has')  // fails if wrong case

或使用具有不区分大小写选项的正则表达式

cy.contains('.MuiButton-label', /text in ANY case/i )            // succeeds for any case

Answer 2

.jss403 在每次构建时由 React 生成。其他两个类是固定的，由 Material-UI 库提供。

既然你有一个标签，你能在标签的文字上搜索吗？

cy.contains('.MuiButton-label', 'the-label-text')

如果您可以使用 devtools 检查页面，请复制 HTML 部分（使用右键单击选项“编辑为 HTML”）并将其添加到您的问题中，然后可以给出更准确的答案。

---

根据 MUI 文档页面 here，您将针对具有文本“默认”文本的第一个示例按钮的元素是

<span class="MuiButton-label">Default</span>

我从他们提供的 CodeSandbox 链接中克隆了该页面，并向默认按钮添加了一个简单的点击处理程序

应用程序 - demo.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

...

export default function OutlinedButtons() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Button variant="outlined" onClick={() => { alert('clicked') }}>Default</Button>

测试

it('clicks the MUI button', () => {

  cy.visit('http://localhost:3000')  // cloned the example and running it locally

  cy.contains('.MuiButton-label', 'Default')
    .click()                         // shows "(alert) clicked" 
                                     // in Cypress runner log

})

警报实际上并没有显示，因为赛普拉斯抑制了它，但日志中有一个条目。

Answer 3

终于解决了！

使用此代码，

 cy.get('.MuiButtonBase-root > .MuiButton-label').eq(4).click({force: true})

我发现我有 5 个元素，所以在初始代码中使用eq(x)（通过删除与反应相关的变量部分。