js实现按键精灵——尝试前端实现自动化测试(一)下

简介: js实现按键精灵——尝试前端实现自动化测试(一)下

页面滚动(场景比较复杂)

代码


dom:


<div class="scroll-container">
    <div class="scroll-content">
        <div class="scroll-inner">
            内部滚动测试
        </div>
    </div>
</div>


css:


body {
    height: 1800px;
}
.scroll-container {
    max-height: 500px;
    background: pink;
    overflow: auto;
}
.scroll-content {
    height: 800px;
}
.scroll-inner {
    width: 300px;
    height: 300px;
    background-color: purple;
}


js:


let mouseX = 0;
let mouseY = 0;
let scrollStartEl = null; //用于记录滚动的起始元素,为了保证重现操作时为元素设置scrollTop时不出现偏差
let scrollRecordList = [];
let scrollElementSet = new Set();
// 通用节流方法
const throttle = function (cb, delay = 100) {
    let timer = null;
    return (ev) => {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            cb && cb(ev);
        }, delay)
    };
}
// 绑定滚动事件
setScrollWatcher = function (ev) {
    mouseX = ev && ev.clientX || mouseX;
    mouseY = ev && ev.clientY || mouseY;
    scrollStartEl = document.elementFromPoint(mouseX, mouseY);
    let el = scrollStartEl;
    while (el) {
        if (scrollElementSet.has(el)) {
            el = null;
        } else {
            el.onscroll = throttle(recordScrollInfo);
            scrollElementSet.add(el);
            el = el.parentNode;
        }
    }
};
// 记录滚动信息
recordScrollInfo = function (ev) {
    let el = scrollStartEl;
    // 单纯的滚动也可能引起鼠标对应的dom的变化,滚动结束也需要setScrollWatcher
    setScrollWatcher();
    let scrollRecordInfo = {
        mouseX: mouseX,
        mouseY: mouseY,
        scrollTopList: []
    }
    while (el) {
        scrollRecordInfo.scrollTopList.push(el.scrollTop);
        el = el.parentNode;
    }
    scrollRecordList.push(scrollRecordInfo);
    console.log(scrollRecordList)
}
// 绑定鼠标移动事件
document.onmousemove = throttle(setScrollWatcher);


讲解


这里大家请跟着我的思路一步一步来:


  1. 首先我给document绑定了鼠标移动事件,并且为其设置了节流


// 绑定鼠标移动事件
document.onmousemove = throttle(setScrollWatcher);


我现在得到了鼠标最后停止的位置,我的思路是,如果现在用户开始滚动鼠标滚轮,那么页面可能发生的滚动可能就出现在,鼠标悬停位置对应的元素及其所有祖先元素上!


  1. 正如前面的介绍,我现在要做的就是给鼠标悬停位置对应的元素及其所有祖先元素绑定滚动事件,即setScrollWatcher方法所做的事情。


let mouseX = 0;
let mouseY = 0;
let scrollStartEl = null; //用于记录滚动的起始元素,为了保证重现操作时为元素设置scrollTop时不出现偏差
let scrollElementSet = new Set();
// 绑定滚动事件
setScrollWatcher = function (ev) {
    mouseX = ev && ev.clientX || mouseX;
    mouseY = ev && ev.clientY || mouseY;
    scrollStartEl = document.elementFromPoint(mouseX, mouseY);
    let el = scrollStartEl;
    while (el) {
        if (scrollElementSet.has(el)) {
            el = null;
        } else {
            el.onscroll = throttle(recordScrollInfo);
            scrollElementSet.add(el);
            el = el.parentNode;
        }
    }
};


大家看的应该也不是很费劲,首先鼠标停下来了,我就记录一下现在鼠标所在的元素存在scrollStartEl中,之后为它以及他的所有祖先元素设置滚动事件(当然滚动事件也做了节流处理~)。

优化:其中为了防止重复绑定滚动事件,也做了一定的优化,引入了一个scrollElementSet,如果set中存在这个元素,那么直接结束循环。(tip:因为一个元素只会有一个直接父元素


  1. 下一步就显而易见了,就是要在滚动事件结束之后对其进行记录~


recordScrollInfo = function (ev) {
    let el = scrollStartEl;
    // 单纯的滚动也可能引起鼠标对应的dom的变化,滚动结束也需要setScrollWatcher
    setScrollWatcher();
    let scrollRecordInfo = {
        mouseX: mouseX,
        mouseY: mouseY,
        scrollTopList: []
    }
    while (el) {
        scrollRecordInfo.scrollTopList.push(el.scrollTop);
        el = el.parentNode;
    }
    scrollRecordList.push(scrollRecordInfo);
    console.log(scrollRecordList)
}


我只需要记录滚动开始鼠标所在元素scrollStartEl及其所有祖先元素的scrollTop就可以了,之后在复线操作的过程中,根据记录的mouseXmouseY找到滚动开始元素,并为其以及其所有祖先元素设置scrollTop即可~

注意

  1. 单纯的滚动也可能引起鼠标对应的dom的变化,滚动结束也需要setScrollWatcher
  2. 因为滚动结束后鼠标位置对应的元素可能会变,所以确实需要在滚动前记录滚动开始元素,防止复现操作时出现元素层级不一致问题。


我感觉这个滚动的记录还是有点骚的,哈哈哈,我就是这么臭不要脸,哈哈哈~


完整代码【方便查看】


完整的测试代码在此,如果上github不方便,可以直接复制粘贴试一下~


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body {
            height: 1800px;
        }
        .scroll-container {
            max-height: 500px;
            background: pink;
            overflow: auto;
        }
        .scroll-content {
            height: 800px;
        }
        .scroll-inner {
            width: 300px;
            height: 300px;
            background-color: purple;
        }
        .btn {
            margin-top: 1000px;
        }
    </style>
</head>
<body>
    <!-用于测试多种类型的点击事件可否派发-->
    <label><input name="Fruit" type="radio" value="" class="aaa" />苹果 </label>
    <label><input name="Fruit" type="radio" value="" class="bbb" />桃子 </label>
    <label><input name="Fruit" type="radio" value="" />香蕉 </label>
    <label><input name="Fruit" type="radio" value="" />梨 </label>
    <label><input name="Fruit" type="radio" value="" />其它 </label>
    <!-用于测试keydown事件-->
    <input class ="inputTest" />
    <button class="btn">
        nihao
    </button>
    <div class="scroll-container">
        <div class="scroll-content">
            <div class="scroll-inner">
                内部滚动测试
            </div>
        </div>
    </div>
    <script>
        /*
        * 第一步:完成点击事件,滚动事件,键盘输入事件的记录和重现。
        * TODO:待办:拖拽事件?
        */
        const clickEvent = new MouseEvent('click');
        const focusEvent = new FocusEvent('focus',{
            view: window
        });
        // 通用节流方法
        const throttle = function (cb, delay = 100) {
            let timer = null;
            return (ev) => {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    cb && cb(ev);
                }, delay)
            };
        }
        //TODO: 所有点击事件,滚动事件,键盘输入事件都需要记录时间点,相对最开始时间偏移,以正确重现
        // 测试点击事件
        document.onclick = function (ev) {
            const x = ev.clientX;
            const y = ev.clientY;
            setTimeout(() => {
                document.elementFromPoint(x, y).dispatchEvent(clickEvent);
            }, 2000)
        }
        document.getElementsByClassName('btn')[0].onclick = function () {
            console.log(11, 1)
        }
        // TODO:(待验证)测试重现滚动事件
        let mouseX = 0;
        let mouseY = 0;
        let scrollStartEl = null; //用于记录滚动的起始元素,为了保证重现操作时为元素设置scrollTop时不出现偏差
        let scrollRecordList = [];
        let scrollElementSet = new Set();
        setScrollWatcher = function (ev) {
            mouseX = ev && ev.clientX || mouseX;
            mouseY = ev && ev.clientY || mouseY;
            scrollStartEl = document.elementFromPoint(mouseX, mouseY);
            let el = scrollStartEl;
            while (el) {
                if (scrollElementSet.has(el)) {
                    el = null;
                } else {
                    el.onscroll = throttle(recordScrollInfo);
                    scrollElementSet.add(el);
                    el = el.parentNode;
                }
            }
        };
        recordScrollInfo = function (ev) {
            let el = scrollStartEl;
            // 单纯的滚动也可能引起鼠标对应的dom的变化,滚动结束也需要setScrollWatcher
            setScrollWatcher();
            let scrollRecordInfo = {
                mouseX: mouseX,
                mouseY: mouseY,
                scrollTopList: []
            }
            while (el) {
                scrollRecordInfo.scrollTopList.push(el.scrollTop);
                el = el.parentNode;
            }
            scrollRecordList.push(scrollRecordInfo);
            console.log(scrollRecordList)
        }
        // 绑定鼠标移动事件
        document.onmousemove = throttle(setScrollWatcher);
        // 测试键盘输入事件
        // 做法:假定,持续的键盘输入都是对同一个 input的输入,
        // 那我需要做的就是保存输入顺序,并记录上一刻点击的元素,并改变其value!!判断是不是input(有没有value属性来判断),如果不是用innerHtml/innerText去塞!!!为了支持富文本
        document.onkeydown = function (ev) {
            console.log(ev)
        }
        const keyTestEl = document.getElementsByClassName('inputTest')[0];
        keyTestEl.dispatchEvent(clickEvent)
        console.log(keyTestEl, focusEvent)
        keyTestEl.dispatchEvent(focusEvent)
        // const keyEvent = new KeyboardEvent('keypress',{'key':'a'})
        //keyTestEl.dispatchEvent(keyEvent)
        //keyTestEl.value = '11111'
        // 测试radio的点击事件是否可以派发
        document.getElementsByClassName('bbb')[0].dispatchEvent(clickEvent)
        document.getElementsByClassName('aaa')[0].dispatchEvent(focusEvent)
    </script>
</body>
</html>


结束语


网络异常,图片无法展示
|


眼里要有小星星,生活才能亮晶晶~

感谢大家阅读,都要快乐生活哦~

下一篇文章,故事继续哈

相关文章
|
12天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
12天前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
10天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
3天前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
19 6
|
1天前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
9 0
|
1天前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
9 0
|
1天前
|
JavaScript 前端开发 搜索推荐
【前端基础篇】JavaScript之DOM介绍1
【前端基础篇】JavaScript之DOM介绍
13 0
|
12天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
12天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
13天前
|
前端开发 JavaScript
前端JS控制网页复制粘贴
前端JS控制网页复制粘贴