css - 将 Styled-Component 与 Selenium 定位器集成

Question

<分区>

Answer 1

这是我的解决方案。希望对你有帮助。

<强>1。使用 data-testid 或 data-what-ever-you-like 等 HTML5 属性

例如:(在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']")