UI自动化之监控平台的搭建VUE+novnc(前端一)

说明原理

利用 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>

后续预计更新功能

1. 窗口自适应屏幕，一个窗口就平铺页面，2个就平分，不会像现在一样定死了每个窗口的宽度
2. 单独窗口的放大缩小
3. 单独窗口的操作功能，包括放大页面缩小页面，关闭远程，重启远程之类
4. 单独窗口的状态通知功能
5. 全体窗口的重新运行功能
6. 部分窗口暂停功能

第二版本点击下面链接

第二版再此处