webpack自定义loader添加data-testid

• 前端E2E测试
• 自动化测试
• 自定义loader

背景介绍

最近使用Cypress对web项目边写自动化测试脚本时，元素定位十分困难，而vue不在为每个元素定义id，导致自动化测试脚本定位元素比较困难，通过class或者xpath的方式比较复杂，而且Element-UI组件生成的dom结构也比较复杂，进一步将元素定位复杂化。

方案

首先想到的是手工为每个元素添加testid，显然添加工作量大，维护成本高。经过观察发现，项目中采用VueI18n支持多语言，通过匹配$t()括号中的变量，可以自动添加属性，针对带有v-model的栏位，也可以通过正则匹配获取对应的变量，自动添加属性。

实现

要修改源码，首先想到的就是通过webpack自定义loader实现

1. 自定义loader

// 添加testid
const addTestId = (originStr, len, testId)=>{
    `${originStr.slice(0,len)} data-testid="${testId}"${originStr.slice(len)}`
}
module.exports = function (source) {
    // 正则匹配v-model 本项目中有使用trim
    const modelRE = /v-model(?:\.trim)?="(.*?)"/
    // 可根据其他实际情况添加对应的正则替换
    return source
}

2. webpack配置

需配置vue对应的rule，增加自定义loader

{
    chainWebpack(config) {
        // ...
        config.module
            .rule('vue')
            .use('my-testid-loader')
            .loader(path.resolve('loaders', 'my-testid-loader'))
            .end()
    }
}