解决element 被弹窗覆盖,可以找到却无法点击

软硬环境

操作系统:win10 

IDE:eclipse

Java:1.8

selenium:3.141.59

解决element 被弹窗覆盖,可以找到却无法点击

 

点击下拉按钮时,弹出一个框,会把“Save API Version and Continue”按钮覆盖掉,会造成能够找到按钮,但是无法点击的情况

解决方法:

  import org.openqa.selenium.JavascriptExecutor;

         /**
         * Solve the problem of element overwriting
         * 
         * @param element 这个参数就是你需要找到并点击的元素
         */
        public void clickOnHideButton(WebElement element) {
                ((JavascriptExecutor) driver).executeScript("arguments[0].click()", element);
        }

 

转载于:https://www.cnblogs.com/aidegongyang/p/11015315.html

### 调整 Element Plus Confirm 对话宽度的方法 Element Plus 的 `ElMessageBox` 组件用于创建确认对话(confirm)。默认情况下,该组件的宽度是由内部样式控制的。如果需要自定义其宽度,可以通过传递配置参数来实现。 以下是具体方法: #### 方法一:通过 `options` 参数设置宽度 在调用 `ElMessageBox.confirm()` 时,可以传入一个对象作为第二个参数,其中包含 `customClass` 或直接指定 `width` 属性[^1]。 ```javascript import { ElMessageBox } from 'element-plus'; ElMessageBox.confirm( '这是一段提示文字', '标题', { width: '500px' // 设置对话宽度 } ).then(() => { console.log('用户点击了确认'); }).catch(() => { console.log('用户取消了操作'); }); ``` 此方式适用于简单的场景下快速修改宽度需求。 --- #### 方法二:利用 CSS 自定义类名覆盖默认样式 当需要更复杂的样式定制时,可通过 `customClass` 配置项为对话添加特定的类名,并通过全局或局部样式文件调整宽度和其他属性[^2]。 ##### Vue 文件中的代码示例: ```vue <template> <el-button @click="openConfirm">打开 Confirm</el-button> </template> <script> export default { methods: { openConfirm() { this.$confirm('这是一段提示文字', '标题', { customClass: 'my-custom-confirm', // 添加自定义类名 width: '600px' }).then(() => { console.log('用户点击了确认'); }).catch(() => { console.log('用户取消了操作'); }); }, }, }; </script> <style scoped> .my-custom-confirm .el-message-box { width: 700px !important; /* 使用更高的优先级覆盖 */ } </style> ``` 这种方式允许开发者更加灵活地管理样式,尤其是针对不同分辨率下的响应式设计。 --- #### 方法三:修复可能存在的宽度计算偏差问题 有时由于架版本或其他原因可能导致弹窗实际渲染出来的宽度不符合预期值。此时可以在初始化项目或者引入 element-plus 后手动修正相关样式规则[^2]。 例如,在全局样式表中加入如下内容以解决潜在的 `width=calc(100%-8px)` 导致的位置偏移现象: ```css /* 解决 el-dialog 宽度异常问题 */ .el-overlay-dialog { --el-dialog-width-calc-fix: calc(var(--el-dialog-width, 100%) - 8px); } @media screen and (max-width: 768px) { .el-dialog { width: var(--el-dialog-mobile-width, 98%) !important; } } ``` 以上代码片段能够有效应对移动端设备上的显示适配以及某些特殊布局环境带来的影响。 --- ### 总结 无论是简单还是复杂的需求都可以找到合适的解决方案去满足对于 confirm 对话宽度设定的要求。推荐先尝试直接设置 options 中的 width 值;若遇到特殊情况再考虑运用 css class 进一步优化视觉效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值