最新某某《Web自动化测试 Selenium基础到企业应用》

最新推荐文章于 2024-05-15 23:15:00 发布

我是你走走哥

最新推荐文章于 2024-05-15 23:15:00 发布

阅读量698

点赞数

本文链接：https://blog.csdn.net/lh198708/article/details/89193713

版权

本文介绍了使用Selenium进行Web自动化测试的实践，包括tagsView.vue和scrollPane.vue组件的代码实现，以及Vuex中tagsView.js的state、mutations、actions和getters。通过示例代码展示了如何管理标签视图、添加、删除和切换标签页，以及处理用户交互。

摘要由CSDN通过智能技术生成

废话不多说直接上代码

1.页面组件tagsView.vue、scrollPane.vue

<template>
<div class="tags-view-container">
<scroll-pane
class="tags-view-wrapper"
ref="scrollPane"
>
<router-link
ref="tag"
class="tags-view-item"
:class="isActive(tag)?'tagActive':''"
:to="tag"
@contextmenu.prevent.native="openMenu(tag,$event)"
v-for="tag in Array.from(visitedViews)"
:key="tag.path"
>
{ {tag.meta.title}}
<span
class="el-icon-close"
@click.prevent.stop='closeSelectedTag(tag)'
></span>
</router-link>
</scroll-pane>
<ul
class='contextmenu'
v-show="visible"
:style="{left:left+'px',top:top+'px'}"
>
<li @click="closeSelectedTag(selectedTag)">关闭</li>
<li @click="closeOthersTags">关闭其他</li>
<li @click="closeAllTags">关闭所有</li>
</ul>
</div>
</template>

<script>
import ScrollPane from "@/components/ScrollPane";
export default {
name: "tags-view",
components: { ScrollPane },
data() {
return {
visible: false,
top: 0,
left: 0,
selectedTag: {}
};
},
computed: {
visitedViews() {
console.log("tabView");
console.log(this.$store.state.tagsView);
console.log(this.$store.state);
return this.$store.state.tagsView.visitedViews;
}
},
watch: {
$route() {
this.addViewTags();
this.moveToCurrentTag();
},
visible(value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
}
},
mounted() {
this.addViewTags();
},
methods: {
generateRoute() {
if (this.$route.name) {
return this.$route;
}
return false;
},
isActive(route) {
return route.path === this.$route.path;
},
addViewTags