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页面鼠标弹出层的测试的主要内容,如果未能解决你的问题,请参考以下文章

弹出层(动态实现弹出层的自由控制)

react学习之弹出层

js的事件冒泡和点击其他区域隐藏弹出层

jquery 点击弹出层的确定按钮后,弹出层关闭,部分刷新当前页面的指定的div内容

jquery layer怎么弹出指定的html内元素

layer弹出层的关闭问题