Detox:检测到该元素已显示

Question

我们的应用程序中有一个toast组件，它为我们的测试添加了相当多的薄片。toast组件显示4秒的动画视图，然后消失。在许多测试中，我需要检查消息内容，以便继续测试。

toast组件是用以下代码实现的：

// @flow
import * as React from "react"
import { StyleSheet, View, Animated, Dimensions, Text } from "react-native"

import type {
  TextStyle,
  ViewStyle,
} from "react-native/Libraries/StyleSheet/StyleSheet"

import type AnimatedValue from "react-native/Libraries/Animated/src/nodes/AnimatedValue"
import type { CompositeAnimation } from "react-native/Libraries/Animated/src/AnimatedImplementation"
import { AnimationConstants } from "constants/animations"

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    left: 0,
    right: 0,
    elevation: 999,
    alignItems: "center",
    zIndex: 10000,
  },
  content: {
    backgroundColor: "black",
    borderRadius: 5,
    padding: 10,
  },
  text: {
    color: "white",
  },
})

type Props = {
  style: ViewStyle,
  position: "top" | "center" | "bottom",
  textStyle: TextStyle,
  positionValue: number,
  fadeInDuration: number,
  fadeOutDuration: number,
  opacity: number,
}

type State = {
  isShown: boolean,
  text: string | React.Node,
  opacityValue: AnimatedValue,
}

export const DURATION = AnimationConstants.durationShort

const { height } = Dimensions.get("window")

export default class Toast extends React.PureComponent<Props, State> {
  static defaultProps = {
    position: "bottom",
    textStyle: styles.text,
    positionValue: 120,
    fadeInDuration: AnimationConstants.fadeInDuration,
    fadeOutDuration: AnimationConstants.fadeOutDuration,
    opacity: 1,
  }

  isShown: boolean
  duration: number
  callback: Function
  animation: CompositeAnimation
  timer: TimeoutID

  constructor(props: Props) {
    super(props)
    this.state = {
      isShown: false,
      text: "",
      opacityValue: new Animated.Value(this.props.opacity),
    }
  }

  show(text: string | React.Node, duration: number, callback: Function) {
    this.duration = typeof duration === "number" ? duration : DURATION
    this.callback = callback
    this.setState({
      isShown: true,
      text: text,
    })

    this.animation = Animated.timing(this.state.opacityValue, {
      toValue: this.props.opacity,
      duration: this.props.fadeInDuration,
      useNativeDriver: true,
    })
    this.animation.start(() => {
      this.isShown = true
      this.close()
    })
  }

  close(duration?: number) {
    const delay = typeof duration === "undefined" ? this.duration : duration

    if (!this.isShown && !this.state.isShown) return
    this.timer && clearTimeout(this.timer)

    this.timer = setTimeout(() => {
      this.animation = Animated.timing(this.state.opacityValue, {
        toValue: 0.0,
        duration: this.props.fadeOutDuration,
        useNativeDriver: true,
      })
      this.animation.start(() => {
        this.setState({
          isShown: false,
        })
        this.isShown = false
        if (typeof this.callback === "function") {
          this.callback()
        }
      })
    }, delay)
  }

  componentWillUnmount() {
    this.animation && this.animation.stop()
    this.timer && clearTimeout(this.timer)
  }

  render() {
    const { isShown, text, opacityValue } = this.state
    const { position, positionValue } = this.props
    const pos = {
      top: positionValue,
      center: height / 2,
      bottom: height - positionValue,
    }[position]

    if (isShown) {
      return (
        <View style={[styles.container, { top: pos }]}>
          <Animated.View
            style={[
              styles.content,
              { opacity: opacityValue },
              this.props.style,
            ]}
          >
            {React.isValidElement(text) ? (
              text
            ) : (
              <Text style={this.props.textStyle}>{text}</Text>
            )}
          </Animated.View>
        </View>
      )
    }

    return null
  }
}

通常我们会显示4秒的吐司消息，但我决定在e2e测试中显示1.5秒，以提高速度。

我测试吐司是否存在，如下所示：

await expect(element(by.text(text))).toBeVisible()
await waitFor(element(by.text(text))).toBeNotVisible().withTimeout(2000)

然而，经常发生的情况是，在"toBeVisible“上排毒失败。我可以在屏幕上看到消息，但出于某种原因，戒毒中心没有看到它。

我应该在屏幕上保留消息以进行排毒检测的最短时间是多少？

在.circleCI上，我们会录制测试失败的视频。当测试失败并显示“找不到元素”时，我看了视频，我清楚地看到吐司出现在屏幕上，但排毒无法找到它。

Answer 1

我仍然不确定是否有更好的方法，但我找到了一种目前对我们有效的方法。

我们不是在e2e测试中自动隐藏吐司，而是模拟模式组件以显示并保持可见，直到点击。

一旦排毒看到元素，我们点击它，关闭它并继续我们的测试。