Selenium 请教对 vue.js 框架生成的前端页面，如何高效定位元素？

紫殇情结 · 2018年01月17日 · 最后由文贤平回复于 2019年02月19日 · 4100 次阅读

公司的前端是使用了 vue.js 框架来生成的，页面中有大量重复的 class，对元素的定位比较费力，现在都是用 xpath 来定位元素的，请教各位 selenium 对这种框架有什么好的处理方式么？
例如：

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

打赏支持

共收到 9 条回复时间点赞

levelyu #1 · 2018年03月05日

就用户名和密码而言，结合 type 和 class 就可以精确定位了，https://testerhome.com/topics/10749 这篇文章帮助很大

liu #2 · 2018年03月14日

请问下你遇到 Vue 框架，在脚本调试环境下，按钮、链接等能定位到，但点击无反应吗？

槽神 #3 · 2018年03月15日

这些 class 只是用来引用样式定义，大量重复说明前端写的还不错，一致性比较好
核心问题在于你们的前端开发，不懂 UI 自动化测试的需要，你可以培训他们，然后请他们、要求他们给你加 id：

<template>
    <div style="width: 100%;" id="root">
        <div class="crumbs" id="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 研发过程管理</el-breadcrumb-item>
                <el-breadcrumb-item>需求管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-tabs v-model="activeName" type="border-card" style="margin-top:30px; border-radius:4px;" id="menus">
            <el-tab-pane name="main">
                <span slot="label"><i class="el-icon-info"></i> 主页</span>
                <v-query @user1="clickEvent"></v-query>
            </el-tab-pane>
            <el-tab-pane name="req">
                <span slot="label"><i class="el-icon-star-on"></i> 原始需求</span>
                <v-request :reqinfo="req_info"></v-request>
            </el-tab-pane>
            <el-tab-pane name="srs">
                <span slot="label"><i class="el-icon-star-off"></i> 软件需求</span>
                <!--<v-srs></v-srs>-->
            </el-tab-pane>
            <el-tab-pane name="rel">
                <span slot="label"><i class="el-icon-time"></i> 排期发布</span>
                <!--<v-rel></v-rel>-->
            </el-tab-pane>
        </el-tabs>
    </div>
</template>