CN117873560A - 页面元素的Testid属性的处理方法、***、设备及存储介质 - Google Patents

Abstract

本发明公开了一种页面元素的Testid属性的处理方法、***、设备及存储介质，处理方法包括：获取源代码文件对应的字符串标记；对字符串标记进行语法分析，得到语法结构信息；基于语法结构信息生成Testid属性；将Testid属性自动写入目标代码的节点中。本发明通过对源代码文件对应的字符串标记进行语法分析，得到语法结构信息，基于语法结构信息生成Testid属性；将Testid属性自动写入目标代码的节点中，避免了手动写入Testid属性，降低了人力成本，节省了Testid属性的写入时间。

Description

页面元素的Testid属性的处理方法、***、设备及存储介质

技术领域

本发明涉及页面处理技术领域，特别涉及一种页面元素的Testid属性的处理方法、***、设备及存储介质。

背景技术

随着业务越来越复杂，迭代越来越多，很难保证每次的代码更新是否影响到之前的常规业务，为了保证每次的代码提交质量，也为了节省开发测试的人力以及时间成本，引入UI自动化是保证工程化质量的重要一环，而引入testid则是UI自动化精准度不可缺少的一步，而现有通常是通过手动写入testid，而手动写入testid的方式花费时间长、人力成本高，另外，没有准确基本唯一的testid会导致UI自动化录入以及执行阶段出现定位不精准的问题，可能会大大降低UI自动化的效果。

很多时候，产品或者测试会对于一个业务场景所显示的内容不符合预期而提出疑问，需要开发帮忙调查修改，刚接受相关模块的开发需要通过服务返回，通过全局找关键字等方法去定位源代码，定位时间长。

发明内容

本发明要解决的技术问题是为了克服现有技术中采用手动写入testid的方式，存在花费时间、人力成本高的缺陷，提供一种页面元素的Testid属性的处理方法、***、设备及存储介质。

本发明是通过下述技术方案来解决上述技术问题：

本发明第一方面提供了一种页面元素的Testid属性的处理方法，所述处理方法包括：

获取源代码文件对应的字符串标记；

对所述字符串标记进行语法分析，得到语法结构信息；

基于所述语法结构信息生成Testid属性；

将所述Testid属性自动写入目标代码的节点中。

优选地，所述获取源代码文件对应的字符串标记的步骤包括：

获取源代码文件；

对所述源代码文件进行词法分析，得到所述字符串标记。

优选地，所述处理方法还包括：

基于所述Testid属性进行UI自动化。

优选地，所述处理方法还包括：

基于所述Testid属性获取所述目标代码的节点位置；

和/或，

所述处理方法还包括：

判断节点是否是自闭合元素，若是，则拼接所有所述Testid属性，若否，则判断所述节点是否存在赋值类型语句，若存在，则将模板字面量加入所述Testid属性中；若不存在，则判断所述节点是否是语法扩展元素，若是，则将字符串字面量属性加入所述Testid属性中。

本发明第二方面提供了一种页面元素的Testid属性的处理***，所述处理***包括：

第一获取模块，用于获取源代码文件对应的字符串标记；

语法分析模块，用于对所述字符串标记进行语法分析，得到语法结构信息；

生成模块，用于基于所述语法结构信息生成Testid属性；

写入模块，用于将所述Testid属性自动写入目标代码的节点中。

优选地，所述第一获取模块包括：

获取单元，用于获取源代码文件；

词法分析单元，用于对所述源代码文件进行词法分析，得到所述字符串标记。

优选地，所述处理***还包括：

自动化模块，用于基于所述Testid属性进行UI自动化。

优选地，所述处理***还包括：

第二获取模块，用于基于所述Testid属性获取所述目标代码的节点位置；

和/或，

所述处理***还包括：

第一判断模块，用于判断节点是否是自闭合元素，若是，则调用拼接模块；若否，则调用第二判断模块；

所述拼接模块，用于拼接所有所述Testid属性，

所述第二判断模块，用于判断所述节点是否存在赋值类型语句，若存在，则调用第一加入模块；若不存在，则调用第三判断模块；

所述第一加入模块，用于将模板字面量加入所述Testid属性中；

所述第三判断模块，用于判断所述节点是否是语法扩展元素，若是，则调用第二加入模块；

所述第二加入模块，用于将字符串字面量属性加入所述Testid属性中。

本发明第三方面提供了一种电子设备，包括存储器、处理器及存储在存储器上并用于在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如第一方面所述的页面元素的Testid属性的处理方法。

本发明第四方面提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面所述的页面元素的Testid属性的处理方法。

在符合本领域常识的基础上，上述各优选条件，可任意组合，即得本发明各较佳实例。

本发明的积极进步效果在于：

本发明通过对源代码文件对应的字符串标记进行语法分析，得到语法结构信息，基于语法结构信息生成Testid属性；将Testid属性自动写入目标代码的节点中，避免了手动写入Testid属性，降低了人力成本，节省了Testid属性的写入时间。

附图说明

图1为本发明实施例1的页面元素的Testid属性的处理方法的流程图。

图2为本发明实施例2的页面元素的Testid属性的处理***的模块示意图。

图3为本发明实施例3的电子设备的结构示意图。

具体实施方式

下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。

实施例1

本实施例提供的一种页面元素的Testid属性的处理方法，如图1所示，该处理方法包括：

步骤101、获取源代码文件对应的字符串标记；

步骤102、对字符串标记进行语法分析，得到语法结构信息；

本实施例中，通过语法分析将字符串标记递归组装成对象、声明语句、赋值表达式等；

其中，语法结构信息至少包括源代码文件的源文件路径、源代码的标签、源代码的赋值信息、源代码的属性信息中的至少一种。

步骤103、基于语法结构信息生成Testid属性；

步骤104、将Testid属性自动写入目标代码的节点中。

本实施例中，根据语法结构信息中的源代码相关信息捕捉访问节点的正确时机，并在正确的时机中，对相关节点进行处理，获取到符合规则的信息进行拼接作为testid属性的内容，通过babel(语法转换工具)将细粒度很高的Testid属性自动写入目标代码的节点中。

本实施例通过对源代码文件对应的字符串标记进行语法分析，得到语法结构信息，基于语法结构信息生成Testid属性；将Testid属性自动写入目标代码的节点中，避免了手动写入Testid属性，降低了人力成本，节省了Testid属性的写入时间。

在一可选的实施例中，步骤101包括：

步骤1011、获取源代码文件；

步骤1012、对源代码文件进行词法分析，得到字符串标记。

本实施例中，对获取的源代码文件进行词法分析，按照单词的构成规则拆分出字符串token(标记)。

在一可选的实施例中，处理方法还包括：

基于Testid属性进行UI自动化。

在一可选的实施例中，处理方法还包括：

基于Testid属性获取目标代码的节点位置；

本实施例中，通过babel将细粒度很高的Testid属性自动写入目标代码的节点中，来辅助更好地进行UI自动化用例，以及通过页面元素的testid属性快速溯源到目标代码的节点位置。

在一可选的实施例中，处理方法还包括：

步骤201、判断节点是否是自闭合元素，若是，则执行步骤202；若否，则执行步骤203；

步骤202、拼接所有Testid属性；

步骤203、判断节点是否存在赋值类型语句，若存在，则执行步骤204；若不存在，则执行步骤205；

步骤204、将模板字面量加入Testid属性中；

步骤205、判断节点是否是语法扩展元素，若是，则执行步骤206；若否，则结束。

步骤206、将字符串字面量属性加入Testid属性中。

本实施例中，加载Babel编译环境包括：加载Babel中的基本加载器，并对基本加载器进行配置；创建babel.config.js文件；在babel.config.js文件中对预设文件和插件文件进行配置，包括：module:metro-react-nativ e-babel-preset(module:metro-react-native-babel-preset用于配置Babel转译器的预设(preset)，它是为React Native项目而设计的。它的作用是帮助你的React Native应用程序在运行时进行代码转译，以确保你可以使用最新的JavaScript语法和功能，同时保持与React Native的兼容性)，@babel/preset-typescript(@babel/preset-typescript用于配置Babel转译器的预设(preset)，它是为TypeScript项目而设计的。它的作用是帮助你的TypeScript代码在编译时进行转译，以确保你可以使用最新的JavaScript语法和功能，同时保持与目标环境的兼容性)。每个准备加入testid属性的源代码都会先拼接出源代码所属的文件名，如果是index文件则会获取该文件的父文件名，同时，拼接上源代码的标签名。当文件后缀符合js(javascript)(直译式脚本语言)或者ts(typescript)(TypeScript是一种开源的编程语言，它是JavaScript的超集。它添加了静态类型检查和一些其他特性，以提供更好的开发工具和更强大的编码体验)或者jsx(react javascript xml)(一种在JavaScript中编写类似XML的语法扩展。它是React框架中用于描述用户界面的一种语法，也可以在其他支持JSX的框架中使用)或者tsx(react typescript xml)(TSX(TypeScript XML)是一种在TypeScript中编写类似XML的语法扩展。它是在JSX的基础上，添加了TypeScript的类型注解和类型检查功能，用于描述React组件的结构和渲染)才进行节点处理，否则，直接返回跳过此节点处理，提高编译速度。当源代码已经存在testid关键词，直接返回跳过该节点处理，减少目标代码体积，不影响手动写入效果。当节点的左右叶子节点不存在赋值类型语句且是开放型元素，则拼接出所有style(样式)属性对应的信息进行拼接，来确保获取的testid属性相对唯一性。当节点存在赋值类型语句且不是自闭合元素，通过检测元素的真实值作为模版字面量加入到testid属性中，由于UI自动化中mock的数据是固定的，可以解决数组唯一性问题，同时，由于不依赖代码的组件结构所以即使后面代码结构出现了变化，仍不影响已写的断言。当节点是自闭合元素，则拼接出所有属性对应的内容进行拼接，来确保testid的细粒度。

需要说明的是，在UI自动化测试中，mock是指模拟或伪造数据的过程。当进行UI自动化测试时，有时需要模拟一些固定的数据来模拟真实的数据源或服务的行为。这些模拟数据可以用于测试UI组件的渲染、交互和状态管理等方面。

在具体实施过程中，页面元素的Testid属性的处理流程包括解析、转化、生成，该处理方式主要是介入解析和转化阶段来达到预期的效果。其中包括，parse(解析)阶段：在经过词法分析，按照单词的构成规则拆分出字符串token，语法分析将token递归组装成对象、声明语句、赋值表达式等。traverse(转化)阶段：此阶段是对parse生成的AST的处理，会进行AST(抽象语法树)的遍历，遍历的过程中处理到不同的AST节点会调用注册的相应的visitor函数(观察者模式)。generate(生成)阶段：将AST从跟节点进行递归拼接成最后的目标代码，解决了相关技术中不同平台代码不兼容的技术问题，从而降低了不同平台代码开发、维护成本。

其中，react native在typescript转javascript，进行例如@babel/core，@babel/preset-typescript，@types/react-native等基本babel处理之前先对源代码进行testid处理，ttsc(ttypscript)可以在ts编译js过程中读tsconfig里面写的babel插件文件并进行优先处理，ts-node是一个Node.js的命令行工具，它可以直接运行TypeScript代码，而不需要先将TypeScript代码编译成JavaScript代码。将最终带有自动化生成的testid的产物包进行相对应环境的发布，相应人员可以进行UI自动化的录制以及写入详细断言，在代码更新工程化过程中加入UI自动化测试环节，来确保高质量的发布。

在此过程中，如果碰到不符合后缀命名的文件提前退出处理过程，提高处理效率。如果碰到已经手写入的testid属性，不予以覆盖，以提高testid的灵活性以及优先级区分。该方法通过babel提供的visit函数(Babel提供了一个名为visit的函数，用于遍历和访问抽象语法树(AST)的节点。visit函数可以帮助开发者在AST中查找特定类型的节点，并对其进行处理或修改)，在深度遍历这棵AST的时候，捕捉到isJsxElement(isJsxElement是Babel提供的一个辅助函数，用于判断给定的节点是否为JSX元素。JSX元素是在React或类似的库中使用的一种语法，用于描述UI组件的结构和属性)，isJsxSelfClosingElement(isJsxSelfClosingElement是Babel提供的一个辅助函数，用于判断给定的节点是否为JSX自闭合元素。JSX自闭合元素是在React或类似的库中使用的一种语法，用于描述没有子元素的UI组件)和isJsxOpeningElement(isJsxOpeningElement是Babel提供的一个辅助函数，用于判断给定的节点是否为JSX开始元素。JSX开始元素是在React或类似的库中使用的一种语法，用于描述UI组件的结构和属性)关键节点，从关键节点去获取需要的内容。如果检测到isJsxElement(isJsxElement是Babel提供的一个辅助函数，用于判断给定的节点是否为JSX元素。JSX元素是在React或类似的库中使用的一种语法，用于描述UI组件的结构和属性)节点，寻找该节点的叶子节点，获取叶子节点上对应的表达式，通过生成模版字面量值来确保表达式生效，这样可以保证数组的唯一性问题，并且拼接上对应的文件名以及组件名，更新jsxopeningelement并且将生成的jsxopengelement加入jsxelement中。另外会访问该叶子节点对应的isJsxSelfClosing ElementisJsxOpeningElement节点，需要遍历获得自闭合组件里所有的属性对应的值拼接上对应的文件名以及组件名，生成字符串字面量值以更新自闭合节点。另外会访问该叶子节点对应的isJsxOpeningElement节点，通过解析该节点所在的文件信息，过滤出需要做处理的文件，再通过标签过滤，获取需要加入testid属性的标签，再根据是否存在style属性来获取更精准的位置结构，再将以上内容拼接成一个唯一且具代表性的信息，生成新的testid属性，生成值为字符串字面量的属性，将生成的属性***到isJsxOpeningElement节点中，返回新的AST。另外，在前端开发中，style属性用于为HTML元素添加样式。它是一个内联样式属性，可以直接在HTML元素上设置，而不需要使用外部的CSS文件。style属性的值是一个对象，其中包含一系列键值对，表示要应用到元素的样式属性和对应的值。每个键值对表示一个样式属性和它的值。

需要说明的是，@babel/core是Babel的核心模块，它是Babel编译器的主要组成部分。它提供了一组API，用于配置和执行JavaScript代码的转换过程。@babel/core模块的主要功能包括：解析器(Parser)：@babel/core使用解析器将源代码解析为抽象语法树(AST)。这个过程将源代码转换为一种更易于处理和操作的数据结构。转换器(Transformer)：@babel/core使用转换器对AST进行转换和修改。开发者可以通过配置插件和预设来指定需要进行的转换操作，例如转换新语法、应用代码优化等。生成器(Generator)：@babel/core使用生成器将转换后的AST重新生成为JavaScript代码。这个过程将修改后的AST转换回可执行的代码字符串。配置(Configuration)：@babel/core允许开发者通过配置文件(如.babelrc、babel.config.js)或编程方式来配置Babel的转换行为。开发者可以指定需要使用的插件、预设、转换规则等。API：@babel/core提供了一组API，开发者可以使用这些API在自定义的构建工具或脚本中集成Babel的功能。通过调用API，开发者可以手动执行代码的转换过程，获取转换后的结果等)，@babel/preset-typescript(@babel/preset-typescript是Babel的一个预设(preset)模块，用于在Babel中转换TypeScript代码。它是@babel/preset-env的补充，专门用于处理TypeScript相关的语法和类型检查)，@types/react-native(@types/react-native是一个TypeScript类型声明库，用于为React Native应用程序提供类型定义。它是由社区维护的，为React Native框架中的各种API、组件和模块提供了详细的类型注解。

本实施例基于babel语法分析和转换生成testid用于UI自动化及回溯代码。该方式包括：在基于目标项目的本地代码进行编译时，利用babel编译插件对本地代码进行跨平台移动应用开发框架RN和web应用开发框架Reatjs的编译转换，根据一定规则自动生成testid，将testid加入到RN/Reatjs可执行文件中。该方式的引入阶段避开了产物包的时序生命钩子不可控的问题，同时帮助现有的团队可以在不影响源代码的前提下接入此方式。本实施例通过babel自动化，节省了开发手动写入testid属性的时间，同时有了更加精准的testid进行代码溯源，同时有助于更精准的UI自动化测试，方便有效地进行UI自动化，快速溯源页面元素的代码的节点位置，节省人力，时间等成本。

实施例2

本实施例提供的一种页面元素的Testid属性的处理***，如图2所示，该处理***包括：第一获取模块21、语法分析模块22、生成模块23、写入模块24；

第一获取模块21，用于获取源代码文件对应的字符串标记；

语法分析模块22，用于对字符串标记进行语法分析，得到语法结构信息；

本实施例中，通过语法分析将字符串标记递归组装成对象、声明语句、赋值表达式等；

其中，语法结构信息至少包括源代码文件的源文件路径、源代码的标签、源代码的赋值信息、源代码的属性信息中的至少一种。

生成模块23，用于基于语法结构信息生成Testid属性；

写入模块24，用于将Testid属性自动写入目标代码的节点中。

本实施例中，根据语法结构信息中的源代码相关信息捕捉访问节点的正确时机，并在正确的时机中，对相关节点进行处理，获取到符合规则的信息进行拼接作为testid属性的内容，通过babel将细粒度很高的Testid属性自动写入目标代码的节点中。

本实施例通过对源代码文件对应的字符串标记进行语法分析，得到语法结构信息，基于语法结构信息生成Testid属性；将Testid属性自动写入目标代码的节点中，避免了手动写入Testid属性，降低了人力成本，节省了Testid属性的写入时间。

在一可选的实施例中，如图2所示，第一获取模块21包括：获取单元211、词法分析单元212；

获取单元211，用于获取源代码文件；

词法分析单元212，用于对源代码文件进行词法分析，得到字符串标记。

本实施例中，对获取的源代码文件进行词法分析，按照单词的构成规则拆分出字符串token。

在一可选的实施例中，如图2所示，处理***还包括：自动化模块25；

自动化模块25，用于基于Testid属性进行UI自动化。

在一可选的实施例中，如图2所示，处理***还包括：第二获取模块26；

第二获取模块26，用于基于Testid属性获取目标代码的节点位置；

本实施例中，通过babel将细粒度很高的Testid属性自动写入目标代码的节点中，来辅助更好地进行UI自动化用例，以及通过页面元素的testid属性快速溯源到目标代码的节点位置。

在一可选的实施例中，如图2所示，处理***还包括：第一判断模块27、拼接模块28、第二判断模块29、第一加入模块291、第三判断模块292、第二加入模块293；

第一判断模块27，用于判断节点是否是自闭合元素，若是，则调用拼接模块28；若否，则调用第二判断模块29；

拼接模块28，用于拼接所有Testid属性，

第二判断模块29，用于判断节点是否存在赋值类型语句，若存在，则调用第一加入模块291；若不存在，则调用第三判断模块292；

第一加入模块291，用于将模板字面量加入Testid属性中；

第三判断模块292，用于判断节点是否是语法扩展元素，若是，则调用第二加入模块293；若否，则结束。

第二加入模块293，用于将字符串字面量属性加入Testid属性中。

本实施例中，加载Babel编译环境包括：加载Babel中的基本加载器，并对基本加载器进行配置；创建babel.config.js文件；在babel.config.js文件中对预设文件和插件文件进行配置，包括：module:metro-react-nativ e-babel-preset，@babel/preset-typescript。每个准备加入testid属性的源代码都会先拼接出源代码所属的文件名，如果是index文件则会获取该文件的父文件名，同时，拼接上源代码的标签名。当文件后缀符合js(javascript)或者ts(typescript)或者jsx(react javascript xml)或者tsx(reacttypescript xml)才进行节点处理，否则，直接返回跳过此节点处理，提高编译速度。当源代码已经存在testid关键词，直接返回跳过该节点处理，减少目标代码体积，不影响手动写入效果。当节点的左右叶子节点不存在赋值类型语句且是开放型元素，则拼接出所有style属性对应的信息进行拼接，来确保获取的testid属性相对唯一性。当节点存在赋值类型语句且不是自闭合元素，通过检测元素的真实值作为模版字面量加入到testid属性中，由于UI自动化中mock的数据是固定的，可以解决数组唯一性问题，同时，由于不依赖代码的组件结构所以即使后面代码结构出现了变化，仍不影响已写的断言。当节点是自闭合元素，则拼接出所有属性对应的内容进行拼接，来确保testid的细粒度。

需要说明的是，在UI自动化测试中，mock是指模拟或伪造数据的过程。当进行UI自动化测试时，有时需要模拟一些固定的数据来模拟真实的数据源或服务的行为。这些模拟数据可以用于测试UI组件的渲染、交互和状态管理等方面。

在具体实施过程中，页面元素的Testid属性的处理流程包括解析、转化、生成，该处理方式主要是介入解析和转化阶段来达到预期的效果。其中包括，parse阶段：在经过词法分析，按照单词的构成规则拆分出字符串token，语法分析将token递归组装成对象、声明语句、赋值表达式等。traverse阶段：此阶段是对parse生成的AST的处理，会进行AST的遍历，遍历的过程中处理到不同的AST节点会调用注册的相应的visitor函数。generate阶段：将AST从跟节点进行递归拼接成最后的目标代码，解决了相关技术中不同平台代码不兼容的技术问题，从而降低了不同平台代码开发、维护成本。

其中，react native在typescript转javascript，进行例如@babel/core，@babel/preset-typescript，@types/react-native等基本babel处理之前先对源代码进行testid处理，ttsc(ttypscript)可以在ts编译js过程中读tsconfig里面写的babel插件文件并进行优先处理，ts-node是一个Node.js的命令行工具，它可以直接运行TypeScript代码，而不需要先将TypeScript代码编译成JavaScript代码。将最终带有自动化生成的testid的产物包进行相对应环境的发布，相应人员可以进行UI自动化的录制以及写入详细断言，在代码更新工程化过程中加入UI自动化测试环节，来确保高质量的发布。

在此过程中，如果碰到不符合后缀命名的文件提前退出处理过程，提高处理效率。如果碰到已经手写入的testid属性，不予以覆盖，以提高testid的灵活性以及优先级区分。该方法通过babel提供的visit函数，在深度遍历这棵AST的时候，捕捉到isJsxElement，isJsxSelfClosingElement和isJsxOpeningElement关键节点，从关键节点去获取需要的内容。如果检测到isJsxElement节点，寻找该节点的叶子节点，获取叶子节点上对应的表达式，通过生成模版字面量值来确保表达式生效，这样可以保证数组的唯一性问题，并且拼接上对应的文件名以及组件名，更新jsxopeningelement并且将生成的jsxopengelement加入jsxelement中。另外会访问该叶子节点对应的isJsxSelfClosingElementisJsxOpeningElement节点，需要遍历获得自闭合组件里所有的属性对应的值拼接上对应的文件名以及组件名，生成字符串字面量值以更新自闭合节点。另外会访问该叶子节点对应的isJsxOpeningElement节点，通过解析该节点所在的文件信息，过滤出需要做处理的文件，再通过标签过滤，获取需要加入testid属性的标签，再根据是否存在style属性来获取更精准的位置结构，再将以上内容拼接成一个唯一且具代表性的信息，生成新的testid属性，生成值为字符串字面量的属性，将生成的属性***到isJsxOpeningElement节点中，返回新的AST。另外，在前端开发中，style属性用于为HTML元素添加样式。它是一个内联样式属性，可以直接在HTML元素上设置，而不需要使用外部的CSS文件。style属性的值是一个对象，其中包含一系列键值对，表示要应用到元素的样式属性和对应的值。每个键值对表示一个样式属性和它的值。

需要说明的是，@babel/core是Babel的核心模块，它是Babel编译器的主要组成部分。它提供了一组API，用于配置和执行JavaScript代码的转换过程。@babel/core模块的主要功能包括：解析器(Parser)：@babel/core使用解析器将源代码解析为抽象语法树(AST)。这个过程将源代码转换为一种更易于处理和操作的数据结构。转换器(Transformer)：@babel/core使用转换器对AST进行转换和修改。开发者可以通过配置插件和预设来指定需要进行的转换操作，例如转换新语法、应用代码优化等。生成器(Generator)：@babel/core使用生成器将转换后的AST重新生成为JavaScript代码。这个过程将修改后的AST转换回可执行的代码字符串。配置(Configuration)：@babel/core允许开发者通过配置文件(如.babelrc、babel.config.js)或编程方式来配置Babel的转换行为。开发者可以指定需要使用的插件、预设、转换规则等。API：@babel/core提供了一组API，开发者可以使用这些API在自定义的构建工具或脚本中集成Babel的功能。通过调用API，开发者可以手动执行代码的转换过程，获取转换后的结果等)，@babel/preset-typescript(@babel/preset-typescript是Babel的一个预设(preset)模块，用于在Babel中转换TypeScript代码。它是@babel/preset-env的补充，专门用于处理TypeScript相关的语法和类型检查)，@types/react-native(@types/react-native是一个TypeScript类型声明库，用于为React Native应用程序提供类型定义。它是由社区维护的，为React Native框架中的各种API、组件和模块提供了详细的类型注解。

本实施例基于babel语法分析和转换生成testid用于UI自动化及回溯代码。该方式包括：在基于目标项目的本地代码进行编译时，利用babel编译插件对本地代码进行跨平台移动应用开发框架RN和web应用开发框架Reatjs的编译转换，根据一定规则自动生成testid，将testid加入到RN/Reatjs可执行文件中。该方式的引入阶段避开了产物包的时序生命钩子不可控的问题，同时帮助现有的团队可以在不影响源代码的前提下接入此方式。本实施例通过babel自动化，节省了开发手动写入testid属性的时间，同时有了更加精准的testid进行代码溯源，同时有助于更精准的UI自动化测试，方便有效地进行UI自动化，快速溯源页面元素的代码的节点位置，节省人力，时间等成本。

实施例3

图3为本发明实施例3提供的一种电子设备的结构示意图。该电子设备包括存储器、处理器及存储在存储器上并用于在处理器上运行的计算机程序，处理器执行程序时实现实施例1的页面元素的Testid属性的处理方法。图3显示的电子设备30仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图3所示，电子设备30可以以通用计算设备的形式表现，例如其可以为服务器设备。电子设备30的组件可以包括但不限于：上述至少一个处理器31、上述至少一个存储器32、连接不同***组件(包括存储器32和处理器31)的总线33。

总线33包括数据总线、地址总线和控制总线。

存储器32可以包括易失性存储器，例如随机存取存储器(RAM)321和/或高速缓存存储器322，还可以进一步包括只读存储器(ROM)323。

存储器32还可以包括具有一组(至少一个)程序模块324的程序/实用工具325，这样的程序模块324包括但不限于：操作***、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

处理器31通过运行存储在存储器32中的计算机程序，从而执行各种功能应用以及数据处理，例如本发明实施例1的页面元素的Testid属性的处理方法。

电子设备30也可以与一个或多个外部设备34(例如键盘、指向设备等)通信。这种通信可以通过输入/输出(I/O)接口35进行。并且，模型生成的设备30还可以通过网络适配器36与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图3所示，网络适配器36通过总线33与模型生成的设备30的其它模块通信。应当明白，尽管图中未示出，可以结合模型生成的设备30使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID(磁盘阵列)***、磁带驱动器以及数据备份存储***等。

应当注意，尽管在上文详细描述中提及了电子设备的若干单元/模块或子单元/模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

实施例4

本实施例提供了一种计算机可读存储介质，其上存储有计算机程序，程序被处理器执行时实现实施例1所提供的页面元素的Testid属性的处理方法。

其中，可读存储介质可以采用的更具体可以包括但不限于：便携式盘、硬盘、随机存取存储器、只读存储器、可擦拭可编程只读存储器、光存储器件、磁存储器件或上述的任意合适的组合。

在可能的实施方式中，本发明还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在终端设备上运行时，程序代码用于使终端设备执行实现实施例1所述的页面元素的Testid属性的处理方法。

其中，可以以一种或多种程序设计语言的任意组合来编写用于执行本发明的程序代码，程序代码可以完全地在用户设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户设备上部分在远程设备上执行或完全在远程设备上执行。

虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。

Claims (10)

1.一种页面元素的Testid属性的处理方法，其特征在于，所述处理方法包括：

获取源代码文件对应的字符串标记；

对所述字符串标记进行语法分析，得到语法结构信息；

基于所述语法结构信息生成Testid属性；

将所述Testid属性自动写入目标代码的节点中。

2.如权利要求1所述的页面元素的Testid属性的处理方法，其特征在于，所述获取源代码文件对应的字符串标记的步骤包括：

获取源代码文件；

对所述源代码文件进行词法分析，得到所述字符串标记。

3.如权利要求1所述的页面元素的Testid属性的处理方法，其特征在于，所述处理方法还包括：

基于所述Testid属性进行UI自动化。

4.如权利要求1所述的页面元素的Testid属性的处理方法，其特征在于，所述处理方法还包括：

基于所述Testid属性获取所述目标代码的节点位置；

和/或，

所述处理方法还包括：

判断节点是否是自闭合元素，若是，则拼接所有所述Testid属性，若否，则判断所述节点是否存在赋值类型语句，若存在，则将模板字面量加入所述Testid属性中；若不存在，则判断所述节点是否是语法扩展元素，若是，则将字符串字面量属性加入所述Testid属性中。

5.一种页面元素的Testid属性的处理***，其特征在于，所述处理***包括：

第一获取模块，用于获取源代码文件对应的字符串标记；

语法分析模块，用于对所述字符串标记进行语法分析，得到语法结构信息；

生成模块，用于基于所述语法结构信息生成Testid属性；

写入模块，用于将所述Testid属性自动写入目标代码的节点中。

6.如权利要求5所述的页面元素的Testid属性的处理***，其特征在于，所述第一获取模块包括：

获取单元，用于获取源代码文件；

词法分析单元，用于对所述源代码文件进行词法分析，得到所述字符串标记。

7.如权利要求5所述的页面元素的Testid属性的处理***，其特征在于，所述处理***还包括：

自动化模块，用于基于所述Testid属性进行UI自动化。

8.如权利要求5所述的页面元素的Testid属性的处理***，其特征在于，所述处理***还包括：

第二获取模块，用于基于所述Testid属性获取所述目标代码的节点位置；

和/或，

所述处理***还包括：

第一判断模块，用于判断节点是否是自闭合元素，若是，则调用拼接模块；若否，则调用第二判断模块；

所述拼接模块，用于拼接所有所述Testid属性，

所述第二判断模块，用于判断所述节点是否存在赋值类型语句，若存在，则调用第一加入模块；若不存在，则调用第三判断模块；

所述第一加入模块，用于将模板字面量加入所述Testid属性中；

所述第三判断模块，用于判断所述节点是否是语法扩展元素，若是，则调用第二加入模块；

所述第二加入模块，用于将字符串字面量属性加入所述Testid属性中。

9.一种电子设备，包括存储器、处理器及存储在存储器上并用于在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1-4中任一项所述的页面元素的Testid属性的处理方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-4中任一项所述的页面元素的Testid属性的处理方法。