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

Question

我用这个代码来定位元素，以便点击它，但jss403每次都会更改

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

我如何才能改变位置策略，我刚刚开始在柏树，这是我的第一次测试。

Answer 1

请将Paper Button始终视为大写

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

这意味着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在每次构建时生成。其他两个类是固定的，由材质UI库提供。

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

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

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

---

基于此处的MUI文档页面，您将针对第一个示例按钮的元素，该元素具有文本"；默认"；是

<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
})

该警报实际上并没有显示，因为Cypress会抑制它，但日志中有一个条目。

Answer 3

终于解决了！

使用此代码，

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

我发现我有5个元素，所以使用eq(x)对初始代码(通过删除与react.相关的可变部分