按钮点击未跳转如何定位问题

问题:H5页面按钮或者链接点击后无反应,正常应该跳转到另一个页面

1.首先根据异常的表现去做基本判断

1)只是简单的页面跳转,无接口请求

如果点击后只是单纯的触发页面跳转(可以询问前端开发),那么可以判断为前端开发过程中功能遗漏,问题可以记录禅道移交给前端开发

2)点击事件触发接口请求

判断是否有提示,如果有提示,需要校验提示语是否和需求文档一致,实在定位不了,就只能通过抓包来判断。没有提示也通过抓包,根据接口返回来定位问题

是否有提示

a:有提示且异常提示很明确。比如,提示用户名称未填写,但是实际需求文档没有要求名称必填,那么看这个消息是前端返回的,还是后端返回的,找前端或者后端移交问题。

b: 有提示且异常提示比较模糊。比如,系统异常或者是和提示语和当前业务不想干。可以通过抓包工具去拦截接口请求,查看实际接口返回的结果,根据接口返回的结果做进一步判断。判断下是否提示和实际接口返回的结果一致(曾经碰到过前端把消息转错了,所以只从提示判断可能是不准确,还需要校验消息提示是否符合需求)

c: 无提示。直接使用抓包工具去拦截接口请求,查看实际接口返回的结果,根据接口返回的结果做进一步判断。

抓包判断

  通过抓包能看到接口请求的全部信息,可以通过查看对应的接口所在服务器,去查看log查找更详细的信息

a:接口请求地址是否正确。如果有异常,问题移交给前端开发

b:入参有无异常。根据实际业务流程判断参数是否正确,如果有异常,问题移交给前端开发

c:出参正常返回。比如说前端开发一般是根据接口返回的某个字段去判断页面是否需要跳转。那么根据业务流程的话,正常应该是返回一个肯定的结果给前端,校验当前接口的实际返回结果是否是肯定的回复,如果不是,那么这个问题就可以移交给后端开发。如果是肯定的回复,但是页面没有跳转,那么就是前端的问题,可以把问题移交给前端

d:出参返回的是异常。基本能断定是后端的问题,找到对应的服务器查看log,查看更详细的信息,如果能复现,就重新触发下请求,查看log,如果不能的话,就通过业务相关数据查找对应的历史log,截图,描述清楚问题提交给对应的开发。
————————————————
版权声明:本文为CSDN博主「MX9」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_39596278/article/details/79546287

网页开发中,当你想要在DrishtiPage上处理点击按钮后的页面跳转,并定位到新页面上的某个元素时,通常需要结合前端JavaScript库如React、Vue或直接使用原生的JavaScript。这里提供一种基本流程: 1. **事件监听**:首先,在点击按钮的事件处理器中,你需要添加一个监听器,例如在React中可以使用`onClick`属性: ```jsx import React from 'react'; class MyButton extends React.Component { handleClick = () => { // 页面跳转逻辑 window.location.href = '/new-page-url'; // 如果要在新页面加载后定位元素,可以利用异步操作 setTimeout(() => { const elementToFocus = document.getElementById('your-target-element-id'); if (elementToFocus) { elementToFocus.focus(); } }, 0); // 等待新页面加载完成 } render() { return <button onClick={this.handleClick}>点击跳转</button>; } } ``` 2. **等待页面加载**:由于页面跳转是一个异步操作,我们使用`setTimeout`模拟一个短时间的延迟,让浏览器有时间完成跳转并渲染新页面。然后在延迟之后尝试定位元素。 3. **元素选择**:通过`document.getElementById`或者其他DOM查询方法找到目标元素,如CSS选择器(`document.querySelector`)。确保在调用这个方法之前,新的HTML已经渲染到了页面上。 4. **错误处理**:考虑到网络延迟或其他可能的问题,记得检查元素是否存在再进行聚焦操作,避免`null`引用异常。 ```javascript if (!window.location.hash && document.getElementById('your-target-element-id')) { document.getElementById('your-target-element-id').focus(); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值