说明原理
利用 selenium grid中 novnc技术,将7900端口的页面全部用VUE 重新编排,在一个页面进行展示。 不知道7900端口的由来可以看下前面一篇文件
准备工具
- docker
- selenium grid
- vue
- novnc(vue)
先展示这几天的效果
如图所示,每个Se代表一个页面,多少个页面取决于自己个人电脑的性能和docker的性能
单独的页面是能通过localhost:7900进行访问的
解决什么问题
解决了当多线程进行UI自动化时,测试想看下所有页面运行到哪步了,不用单独去打开每个localhost:7900个地址去查看
vue代码如下(第一版):
<template>
<div class="x-input">
地址<input type="text" style="width: 300px;" placeholder="ws://localhost:7900/websockify" v-model="url" />
密码<input style="width: 100px;" placeholder="secret" type="text" v-model="password" />
<button @click="get_url_password">连接novnc</button>
<button @click="closenovnc">断开连接</button>
</div>
<div class="x-novnc">
<div id="novnc-canvs">
</div>
</div>
</template>
<script>
import RFB from '@novnc/novnc/core/rfb';
export default {
name: 'novnc_page',
data() {
return {
rfb:null,
password: 'screen',
url: '',
novncstatus: '',
novnctitle: ''
}
},
mounted() {
// this.connectVnc()
},
methods: {
// 连接vnc
connectVnc() {
console.log('2222222222222222')
const PASSWORD = 'secret';
const url = 'ws://localhost:7900/websockify';
const rfb = new RFB(document.getElementById('novnc-canvs'), url, { credentials: { password: PASSWORD } });
rfb._resizeSession=true
rfb._clippingViewport=true
rfb._scaleViewport=true
this.rfb = rfb
},
get_url_password() {
this.connectVnc()
},
// 断开连接
closenovnc(){
this.rfb._disconnect()
}
}
}
</script>
<style>
.x-input {
margin-top: 40px;
width: auto;
height: auto;
}
input {
border-style: none
}
input:first-child {
margin-right: 30px;
}
#novnc-canvs {
display: flex;
width: auto;
height: auto;
background-color: azure;
flex-direction: row;
flex-wrap: wrap;
/* justify-content: flex-start; */
}
#novnc-canvs > div{
width: 400px !important;
height: 400px !important;
}
</style>
后续预计更新功能
- 窗口自适应屏幕,一个窗口就平铺页面,2个就平分,不会像现在一样定死了每个窗口的宽度
- 单独窗口的放大缩小
- 单独窗口的操作功能,包括放大页面缩小页面,关闭远程,重启远程之类
- 单独窗口的状态通知功能
- 全体窗口的重新运行功能
- 部分窗口暂停功能