Question

我将使用react Styled-Components在网站上运行自动化测试。随着样式化组件频繁更改CSS选择器，我的问题是：选择包含由Styled-Component生成的动态CSS样式的元素的替代方法是什么？

我使用过X-path，但并非所有元素都是x路径的理想选择

Answer 1

这是我的解决方案。希望它能对您有所帮助。

1。使用HTML5属性，例如data-testid或您喜欢的数据

例如：（在codesandbox上实时观看）

import React from "react";
import styled, { css } from "styled-components";

const BorderBox = styled.div`
  text-align: center;
  border: 1px solid #cacaca;
`;
const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

export const MyContainer = React.memo(props => {
  return (
    <BorderBox data-testid="myContainer">
      <TomatoButton data-testid="tomatoButton">Tomato Button</TomatoButton>
      <Button data-testid="normalButton">Normal Button </Button>
    </BorderBox>
  );
});

2。使用xpath查询您的组件：

$x("//div[@data-testid='myContainer']") 

$x("//div[@data-testid='myContainer']/button[@data-testid='tomatoButton']")

将样式化组件与硒定位器集成

1 个答案: