下面的信息是对 playwright 自动化测试框架的新手入门介绍。如果你想要学习更多关于 playwright 自动化测试框架的信息，请参阅它的文档。运行测试：打开测试界面，选择"运行测试"。下面会显示一个非常简单的测试画面。你可以选择任何一个测试项目。你可以通过键盘或者鼠标来调试测试。查看测试报告：在测试结束后，单击"查看测试报告"按钮。测试报告会显示在测试结束后的浏览器中。 安装 Install 非 VS Code 编辑器安装 新建项目文件 使用命令行工具进入新建的项目文件夹 输入命令进行项目初始化 npm init playwright@latest 按照提示进行项目初始化 安装完成后的目录结构为 playwright.config.ts //playwright.config.ts的配置文件 package.json //node项目的配置文件 package-lock.json //node项目的配置文件 tests/ example.spec.ts //测试demo tests-examples/ demo-todo-app.spec.ts //todo app的测试demo VS Code 编辑器安装 新建项目文件 使用 VS Code 编辑器打开新建的项目文件夹 在 VS Code 编辑器安装 Playwright Test for VSCode 插件 然后在 VS Code 编辑器的命令面板上输入 Install Playwright 按照提示进行项目初始化 安装完成后的目录结构为 playwright.config.ts //playwright.config.ts的配置文件 package.json //node项目的配置文件 package-lock.json //node项目的配置文件 tests/ example.spec.ts //测试demo tests-examples/ demo-todo-app.spec.ts //todo app的测试demo 运行测试 Run test VS Code 运行 通过 Playwright Test for VSCode 插件运行 通过 VS Code 打开项目文件后 点击 VS Code 左侧的 Testing(漏斗) 按钮 Testing 页面下会展示所有的 demo 测试用例 点击绿色三角形就可以运行 demo 测试用例了 可以点击是否选中'show browser'来控制是否无头浏览器运行用例和打开浏览器运行用例 测试文件运行 通过 VS Code 打开项目文件后 点击打开 demo 测试文件 点击测试块旁边的绿色三角形 就可以运行测试来运行单个测试 命令行运行 运行所有测试 ...

Cypress Studio 提供了一种在测试运行程序中生成测试的可视化方法，通过记录与被测应用程序的交互。支持.click（）、.type（）、.check（）、.uncheck（）和.select（）Cypress 命令，这些命令将在与 Cypress Studio 内部的 DOM 交互时生成测试代码 通过阅读文章你会学到什么： 如何使用 Cypress Studio 以交互方式扩展测试 如何使用 Cypress Studio 以交互方式添加新测试 概述 Cypress Studio 通过记录与 被测应用程序的交互，提供了一种在 Test Runner 中生成测试的可视化方式。 支持、.click()、.type()、和 Cypress 命令 .check() ，并在与 Cypress Studio 内部的 DOM 交互时生成测试代码。您还可以通过右键单击要断言的元素来生成断言。 .uncheck() .select() 使用 Cypress Studio Cypress Studio 是一项实验性功能，可以通过将 experimentalStudio 属性添加到您的配置文件来启用（ cypress.json 默认情况下）。 { "experimentalStudio": true} Cypress Real World App (RWA) 是一个开源项目，它实现了一个支付应用程序，以展示 Cypress 测试方法、模式和工作流程的实际使用情况。下面将使用它来演示 Cypress Studio 的功能。 扩展测试 您可以扩展任何预先存在的测试，或者通过使用以下测试脚手架在您的 integrationFolder（默认情况下）中创建一个新测试来开始。 第 1 步 - 运行用例 我们将使用 Cypress Studio 执行“新交易”用户流程。首先，启动 Test Runner 并运行在上一步中创建的用例。 ...

Cypress UI 自动化测试框架学习（5）- 命令大全 命令大全 and：创建断言 as：创建别名 blur：失去焦点 check：选中 check 或者 radio children：获取一组 DOM 元素中每个元素的子元素 clear：清除 input 或者 textarea 的值 clearCookie：清除特定的浏览器 cookie clearCookies：清除浏览器的所有 cookie clearLocalStorage：清除 localstorage 的数据 click：点击 DOM 元素 clock：覆盖全局与时间相关的函数 closest：获取与选择器匹配的第一个 DOM 元素 contains：获取包含文本的 DOM 元素 dblclick：双击 DOM 元素 debug：设置调试器并记录上一个命令产生的内容 document：获取 window.document 对象 each：迭代数组结构 end：结束一系列命令 eq：在元素数组中获取特定索引的 DOM 元素 exec：执行系统命令 filter：获取特定选择器匹配的元素 find：查找特定选择器的特定后代元素 first：获取一组 DOM 元素中的第一个 DOM 元素 fixture：加载文件中的数据集 focus：使一个 DOM 元素获取焦点 focused：获取当前获取焦点的 DOM 元素 get：通过选择器或者别名获取一个或者多个 DOM 元素 getCookie：获取浏览器的特定 cookie getCookies：获取浏览器的所有 cookie go：前进或者后退 hash：获取当前页面地址的哈希值 hover：不存在这个命令 invoke：在前边生成的主题上调用函数 its：获取前边生成的主题的属性值 last：获取一组 DOM 元素的最后一个 DOM 元素 location：获取活动页面的 window.location 对象 log：打印 cypress 日志信息 next：获取紧接的下一个兄弟 DOM 元素 nextAll：获取所有兄弟 DOM 元素 nextUntil：获取一组匹配的 DOM 元素中的每个后续兄弟元素，不包括提供的元素 not：过滤 DOM 元素 parent：获取父元素 parents：获取所有的父元素 parentsUntil：获取所有的父元素，不包括提供的元素 pause：暂停执行 cypress 命令 prev：获取前一个兄弟节点 prevAll：获取前边的所有兄弟节点 prevUntil：获取前边所有的兄弟节点，不包括提供的元素 readFile：读取文件内容 reload：重新加载页面 request：发送 HTTP 请求 root：获取页面根节点 route：管理网络请求的行为 screenshot：生成截图 scrollIntoView：将元素滚动到视图中 scrollTo：滚动到特定位置 select：选择 select 中的 option server：启动服务器开始讲响应路由到 cy.route() 和 cy.request() setCookie：设置浏览器 cookie should：创建断言，同 and() siblings：获取兄弟 DOM 元素 spread：将数组扩展为多个参数 spy：包装方法，记录函数的调用和参数 stub：替换函数，记录其用法并控制其行为 submit：提交一个表单 task：通过 task 插件，在 Node.js 中执行代码 then：使用上一个命令产生的结果 tick：移动时间 title：获取活动页面的 document.title trigger：触发 DOM 元素上的事件 type：给 DOM 元素输入内容 uncheck：取消选中复选框 url：获取当前活动页面的 URL viewport：控制应用程序的屏幕大小和方向 visit：访问远程 URL wait：等待方法 window：获取当前活动窗口的 window 对象 within：将后续命令限制在此元素内 wrap：产生传递给 .wrap() 的对象 writeFile：写入指定内容到文件 欢迎关注软件测试同学的公众号“软件测试同学”，原创 QA 技术文章第一时间推送。 ...

下面的信息是自动化测试框架学习第四篇数据驱动方法封装参数化和测试框架的介绍。 在自动化测试框架学习中，有很多方法可以用来驱动测试框架。例如，数据驱动方法封装参数化和测试框架。这两个方法都可以将测试框架的数据处理和预设环境等现有模型结合起来。这样就可以方便地开发、测试和运行新的测试框架。 测试数据驱动 js 格式测试数据驱动 简介 数据以 js 格式存储，使用 js 的 import 方法导入使用 使用方法 新建测试数据 js 文件 示例：在项目的 cypress/integration 文件夹下新建 testData 目录，然后在该目录下创建一个 js 文件，示例文件名为：testLogin.data.js testLogin.data.js 示例代码如下： export const testLoginUserEmail = [ { summary: "正确邮箱账号登录验证", username:"[email protected]", password:"xxxx" } ] export const testLoginUserId = [ { summary: "正确id账号登录验证", username:"waitnoww", password:"xxxx" } ] export const testLoginUserMobilephone = [ { summary: "正确手机号账号登录验证", username:"18888139031", password:"xxxx" } ] 编写测试用例 在项目 cypress/integration 文件夹下新建 js 测试用例文件，示例文件名为：testLogin_guanggoo_data_by_js.js ...

下面的信息是对于框架学习第 3 篇的介绍。在该篇文章中，我们学习了如何使用元素定位、操作和断言。该框架可以帮助用户定位相关的元素，并且可以帮助用户进行操作。这些操作可以帮助用户断言事件。 元素定位 谈到 UI 自动化测试，不管是 web 端还是移动端，页面元素的各种操作在编写测试脚本时都会涉及，如果想写出高通过率和高健壮性的自动化测试用例，必须要确保正确高效的页面元素识别和使用。 cypress 框架除了支持常用的元素定位，还提供了好用的 JQuery css 选择器。 下面会介绍常用的元素定位方法，常用的定位方式，以及框架自带可视化自助元素定位方法 常用元素定位 #id 定位 描述：通过元素的 id 属性来定位 前提：定位的元素 css 样式须存在 id 属性且唯一 //元素前端代码示例 <input type="text" id="email" name="email" placeholder="" class="form-control"> 示例代码 cy.get('#email') .class 定位 描述：通过元素的 class 属性来定位 前提：定位的元素 css 样式存在 class 属性且唯一 //元素前端代码示例 <a class="navbar-brand" href="/"><img width="150" height="28" border="0" align="default" alt="光谷社区" src="http://cdn.guanggoo.com//static/images/guanggoonew.png"></a> 示例代码 cy.get('.navbar-brand') name 定位 描述：通过元素 name 定位 前提：定位的元素 css 样式存在 name 属性且唯一 //元素前端代码示例 <input type="text" id="email" name="email" placeholder="" class="form-control"> ...

下面的信息是介绍 cypress 自动化测试框架学习第 3 篇的测试报告的内容 主要介绍一下如何去使用不同格式的 cypress 自动化测试报告模版 写在前面 由于 Cypress 测试报告是建立在 Mocha 测试报告之上的，这意味着任何为 Mocha 构建的报告程序都可以与 Cypress 一起使用。 以下是内置的 Mocha 测试类型列表（Cypress 也同样支持）：https://mochajs.org/#reporters 前置准备工作 在 package.json 文件的 scripts 模块加入了如下脚本：“cypress:run”:“cypress run”，便于后面生成报告 不同运行脚本的区别： cypress run：是以无头浏览器模式跑测试用例文件夹下的所有测试用例 cypress open：会打开测试用例集的界面，需要手动运行 常用报告类型 spec 格式报告 运行命令 $ npm run cypress:run --reporter=spec 报告截图 Dot 格式报告 前置：在 cypress.json 文件新增"reporter": “dot"信息 运行方式： $ npm run cypress:run 报告截图 json 格式报告 前置：在 cypress.json 文件新增"reporter”: “json"信息 运行方式： $ npm run cypress:run 报告截图 List 格式报告 前置：在 cypress.json 文件新增"reporter”: “list"信息 ...

下面的信息是对 Cypress 自动化测试框架的新手入门介绍。如果你想要学习更多关于 playwright 自动化测试框架的信息，请参阅它的文档。运行测试：打开测试界面，选择"运行测试"。下面会显示一个非常简单的测试画面。你可以选择任何一个测试项目。你可以通过键盘或者鼠标来调试测试。查看测试报告：在测试结束后，单击"查看测试报告"按钮。测试报告会显示在测试结束后的浏览器中。 Introduction 基于 JavaScript 的前端自动化测试工具，可以对浏览器中运行的任何内容进行快速、简单、可靠的测试 Cypress 是自集成的，提供了一套完整的端到端测试，无须借助其他外部工具，安装后即可快速地创建、编写、运行测试用例，且对每一步操作都支持回看 不同于其他只能测试 UI 层的前端测试工具，Cypress 允许编写所有类型的测试，覆盖了测试金字塔模型的所有测试类型【界面测试，集成测试，单元测试】 Cypress 官网：https://www.cypress.io/ Getting Started 下面以 MacOS 来进行介绍，其他系统可参考官网信息 Operating System macOS 10.9 and above (64-bit only) Node.js 12 or 14 and above Before Started 已安装好 node.js 和 npm 已安装好 vs code 或者其他代码编辑器 Started and Run Step1：通过 npm 新建项目 # 新建项目文件夹 $ mkdir cypress-demo # 进入项目文件夹 $ cd cypress-demo # npm项目环境准备 $ npm init Step2：安装 cypress # 项目安装cypress包 $ npm install cypress --save-dev Step3：运行 cypress 程序 若提示：npm ERR! missing script: cypress:open，可在项目根目录 package.json 文件的 scripts 下新增"cypress:open": “cypress open”，保存后再次运行命令即可 ...