讲师中心 微信公众号
AI工具推荐 视频效率加速

layui怎么在前端通过代码模拟点击快速跑自动化UI冒烟测试用例

夏枫同学_5489

夏枫同学_5489

发布时间:2026-10-29 09:14:05

|

655人浏览过

|

来源于php中文网

原创

layui表单控件需用form.val()设值+form.render()刷新视图,日期控件调inst.show()/setValue(),checkbox/radio需改checked属性+render()+trigger('change')。

layui怎么在前端通过代码模拟点击快速跑自动化ui冒烟测试用例

layui 的 click() 无法触发下拉选择、日期控件等内置行为

直接调用原生 click() 或 dispatchEvent 在 layui 表单元素(如 select、laydate、checkbox)上基本无效——因为 layui 不是靠监听原生事件驱动 UI,而是拦截并重写了交互逻辑,依赖内部的 layui.form.render() 和模块实例状态。

实操建议:

立即学习“前端免费学习笔记(深入)”;

  • 优先通过 layui.form.val() 设置值 + layui.form.render() 强制同步视图,绕过点击
  • 对需要“打开弹层”的组件(如日期、下拉),改用其暴露的 show() 方法(若存在)或手动触发绑定的 data-type 对应的内部方法
  • 避免用 document.querySelector('xxx').click() 模拟点击下拉箭头,它不会触发 form.select 的展开逻辑

模拟 select 下拉选中项的正确方式是 form.val() + form.render()

layui 的 select 是渲染为带 layui-select-title 的 div 容器,原生 select 被隐藏。直接改 select.value 或点选项 DOM 不会更新标题文本和关联数据。

实操建议:

立即学习“前端免费学习笔记(深入)”;

  • 用 layui.form.val('filterName', {key: 'value'}) 设置字段值(key 是 name 属性,value 是 option 的 value)
  • 立即调用 layui.form.render('select', 'filterName') 刷新该 select 的显示
  • 如果要触发 change 回调,需手动 layui.$('[name="key"]').trigger('change')(注意:layui 默认不自动 trigger,得自己补)
layui.use(['form'], function(){
  var form = layui.form;
  // 模拟选中 value="2" 的 option
  form.val('myForm', {category: '2'});
  form.render('select', 'myForm');
  layui.$('[name="category"]').trigger('change');
});

日期控件(laydate)不能靠 click 输入框,得调 inst.show() + inst.setValue()

对 input[lay-key] 执行 click() 可能唤起面板,但不可靠;更糟的是,面板内点击日期单元格的 DOM 是动态生成的,冒烟测试中 selector 极易失效。

前端设计引擎
前端设计引擎

使用此技能可创建独具特色、具备生产级质量的前端界面,设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时(例如:网站、落地页、仪表盘、React 组件、HTML/CSS 布局,或对任意 Web UI 进行样式优化与视觉美化),请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计,避免千篇一律的 AI 风格。

下载

实操建议:

立即学习“前端免费学习笔记(深入)”;

  • 保存 laydate 实例(初始化时用 var inst = laydate.render({...}))
  • 用 inst.setValue('2024-05-20') 直接设值,再调 inst.hide()(可选)
  • 若未保留实例,可通过 laydate.getInst(输入框的 lay-key) 获取(lay-key 是渲染后 input 上的属性,通常为数字)
  • 不要尝试用 document.querySelectorAll('.laydate-day-list td[data-date="2024-05-20"]') 点击——DOM 结构随版本变,且异步加载可能未就绪

checkbox/radio 的模拟要点:改 checked 属性 + form.render() + 手动 trigger

layui 的复选框/单选按钮渲染后,原始 input 被隐藏,视觉状态由伪元素控制。仅设 input.checked = true 不会更新样式,也不触发 form 监听。

实操建议:

立即学习“前端免费学习笔记(深入)”;

  • 先用原生方式设置 input.checked = true(或 setAttribute('checked', ''))
  • 立刻调用 layui.form.render('checkbox') 或 layui.form.render('radio')
  • 再手动 layui.$(input).trigger('change') 确保业务回调执行
  • 批量操作时,避免在循环里反复调 form.render(),应统一最后 render 一次

复杂点在于:layui 冒烟测试常忽略表单 filter 名作用域——form.render() 若不传第二个参数(即 filter 值),可能只刷新全局第一个 form,导致其他区域未更新。务必核对 form 元素的 lay-filter 属性与 form.render() 的第二个参数是否一致。

热门AI工具

更多
墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2703

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5883

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6850

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6598

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

943

2024.05.22

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

4431

2023.10.23

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

7768

2024.03.06

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

834

2025.12.30

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.4万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn