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

Question

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

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

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

Answer 1

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

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

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

如果你可以用devtools检查页面，复制HTML的部分（使用右键单击选项'Edit as HTML'）并将其添加到你的问题中，然后可以给出更准确的答案.

基于 MUI 文档页面 here，第一个包含文本“默认”的示例按钮的目标元素是

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

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

应用程序 - 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 2

终于解决了！

使用此代码，

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

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

Answer 3

请看Paper-Button always as upper case

The material design spec for buttons specifies that the text should be uppercase

这意味着 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

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

I can't locate element in cypress because the css selector is changing each time

automation

cypress