Selenium对React页面鼠标弹出层的测试
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Selenium对React页面鼠标弹出层的测试相关的知识,希望对你有一定的参考价值。
参考技术A 要实现鼠标指针覆盖到指定的DIV元素后会弹出一个新的层,目标要抓取弹出层的内容。Github中有个 react-trigger-change.js 的脚本文件,可以更改react 的Input,checkbox等的状态修改。
python中有个pyautogui的库可以实现系统级的鼠标拖拽点按等动作。
那么我们怎么确定DIV的位置呢?
将鼠标移动到目标div上,显示出的值即实际屏幕中div的XY的值
c.selenium中增加鼠标移动并停留即可
至此我们终于可以获得react页面中的信息,要注意的react对鼠标移动的监听层级,selenium虽好但是还是需要一些其他的辅助手段才能获取我们需要的内容。
react 点击空白处隐藏弹出层
点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能。然后我们在不需要隐藏弹出层的元素上阻止冒泡即可。
class Select extends Component { constructor(props) { super(props); this.state = { selected: props.list[0], showList: false }; this.showList = this.showList.bind(this); } componentDidMount() { // 在 document 上绑定点击事件,隐藏弹出层 document.addEventListener(‘click‘, (e) => { this.setState({ showList: false }); }); } showList(e) { // 使用 react 的 e.stopPropagation 不能阻止冒泡,需要使用 e.nativeEvent.stopImmediatePropagation,这里我们对其进行封装,方便多次调用 this.stopPropagation(e); this.setState({ showList: !this.state.showList }); } selectList(i) { const selected = this.props.list[i]; this.setState({ selected: selected, showList: false }); this.props.onChange(selected); } // 封装后的阻止冒泡功能 stopPropagation(e) { e.nativeEvent.stopImmediatePropagation(); } render() { const { list } = this.props; const { selected, showList } = this.state; return ( <div className="hp-select"> <span className="hp-select__text">{selected.text}</span> <span className="hp-select__btn" onClick={this.showList}></span> <div className="hp-select__list" style={{ display: showList ? ‘block‘ : ‘none‘ }} // 方便的调用封装冒泡功能来阻止冒泡 onClick={this.stopPropagation} > <ul> { list && list.map((item, i) => { return <li key={item.value} onClick={this.selectList.bind(this, i)}>{item.text}</li>; }) } </ul> </div> </div> ); } }
以上是关于Selenium对React页面鼠标弹出层的测试的主要内容,如果未能解决你的问题,请参考以下文章