WebdriverIO Typescript Jasmine的入门教程

后端之巅
1,109 阅读8分钟

WebdriverIO Typescript Jasmine入门

这个WebdriverIO教程帮助你使用Jasmine和页面对象模型设置WebdriverIO Typescript项目。了解如何安装和配置!

什么是WebdriverIO？

WebdriverIO 是一个渐进式的自动化框架，用于自动化现代Web和移动应用程序。它简化了与你的应用程序的交互，并提供了一套插件，帮助你创建一个可扩展的、强大的、脆弱的测试套件。WebdriverIO是建立在Selenium NodeJS绑定之上的。

Webdriver IO是由OpenJS 基金会管理的开源框架，并遵循W3框架架构标准。

与Selenium相比，WebdriverIO更好，因为它为你提供了一个现成的框架，易于设置和配置。

Webdriverio的主要特点是什么？

让我们讨论一下在测试自动化中使用WebdriverIO的优势。

可扩展：添加辅助功能，或更复杂的集合和现有命令的组合是很简单和非常有用的。

跨浏览器测试：WebdriverIO支持几乎所有不同类型的浏览器，包括Safari, Chrome, Edge, Firefox等。

跨平台支持：WebdriverIO是基于NodeJS的自动化框架，支持所有主要的操作系统，包括Mac和Windows。因此，你可以在不同的平台上运行你的测试，并确保你的应用程序按预期工作。

本地移动应用程序支持：WebdriverIO不仅支持Web应用程序，还支持移动应用程序，因此您可以通过相应的配置来测试所有的移动应用程序。

易于设置：设置WebdriverIO是非常容易的；它只是安装一些软件包，然后配置配置文件。我们将在本教程中展示这一点。

支持断言库：WebdriverIO支持主要的断言库，如Jasmine、Mocha等。这有助于你无缝地编写你的自动化框架。

社区支持：社区对WebriverIO的支持是巨大的；互联网上有大量的文章和知识库，这样你就可以学习和提高你自己的框架。

这个详细的教程解释了以下内容：

  • 如何使用Typescript和Jasmine从零开始建立WebdriverIO页面对象模型项目。
  • 如何在你的项目中安装WebdriverIO aka WDIO CLI。
  • 如何在WebdriverIO中配置Typescript。
  • 如何在WebdriverIO项目中配置wdio.conf.ts。
  • 如何在WebdriverIO和Typescript中创建第一个页面对象文件。
  • 如何在WebdriverIO中创建第一个测试。
  • 如何执行WebdriverIO（WDIO）。
  • 如何在WebdriverIO CLI中查看结果。

如何从头开始设置Webdriverio的类型脚本框架

在这个详细的教程中，我们将解释如何用Typescript和Jasmine设置WebdriverIO (WDIO)测试自动化项目，并以简单的方式建立页面对象模型。

前提条件：

步骤1：创建一个新的文件夹（例如：WebdriverIOTypScript）

导航到你的任何一个驱动器。创建一个新的文件夹（例如：WebdriverIOTypescript）

步骤2：为你的WebdriverIO项目创建Package.json

创建一个pacakge.json文件。

在你新创建的项目文件夹中，**打开命令提示符并输入。

npm init

上述命令会问你一组预定义的问题。除非你想指定，否则只需点击[Enter][Enter]。一旦一切完成，这将在你的项目文件夹中创建pacakge.json 一个文件**。**

第3步：在Visual Studio Code IDE中打开项目文件夹

在Visual Studio Code中，点击文件 >打开 > 选择新创建的项目文件夹 >点击选择 文件夹。

第4步：安装WebdriverIO命令行界面，也称为WDIO CLI

我们已经在Visual Studio Code IDE中打开了我们的项目文件夹，所以让我们开始安装WebdriverIO。为了安装webdriverIO，我们需要使用npm pacakge @wdio/cli。

在你的Visual Studio Code中，打开终端。

导航到终端菜单 >点击新终端。

输入以下命令，在你的机器上安装Webdriverio。

npm install - save-dev

等待安装完成!

第5步：为你的端到端测试自动化项目设置WebdriverIO

一旦WeddriverIO安装完毕，我们需要使用wdio config命令对WDIO进行首次设置。

在你的Visual Studio代码终端， 输入以下命令。

npx wdio config

命令行会提示一组选项，请像下面这样回答。

  • 你的自动化后端位于哪里？在我的本地机器上

  • 你想使用哪个框架？茉莉花

  • 你想使用一个编译器吗？TypeScript （https://www.typescriptlang.org/）

  • 你的测试规范在哪里？./test/specs/**/*.ts

  • 你想让WebdriverIO自动生成一些测试文件吗？不需要

  • 你想使用哪个报告器？spec

  • 你想在你的测试设置中添加一个服务吗？Chrome驱动

  • 什么是基础URL？ http://localhost

如果你看一下上面这一点，我们正在为我们的测试自动化项目安装WebdriverIO，它使用Typescript，Jasmine

一旦上述步骤完成，它将为你创建一个默认配置

第6步：为WebdriverIO Typescript项目创建目录结构

我们正在创建WebdriverIO，一个带有页面对象模型的Typescript项目，所以我们需要遵循正确的文件夹结构，如下所示：

  • 在你的项目根文件夹中创建一个名为test 的文件夹
  • 在test 文件夹下，创建两个文件夹：pages 和specs

文件夹结构应该如下图所示

WebdriverIOTypescript
-test
--pages
--specs

步骤7：为WebDriverIO项目安装Typescript和ts-node npm包

在你的Visual Studio Code终端，输入以下命令来安装Typescript和ts-node。

npm install typescript ts-node --save-dev

注意。如果你在webdriver设置时选择了Typescript选项，这些包应该已经安装好了。只要确保安装正确即可。

步骤8：为WebdriverIO项目创建tsconfig.json文件

打开Visual Studio代码终端， 并输入以下命令：

npx tsc --init

上述操作将在你的项目根目录中创建一个 **tsconfig.json**文件，在你的项目根目录 中。

第9步：在WebdriverIO项目中配置tsconfig.json文件

删除默认生成的代码，并在tsconfig.json中用下面的代码代替。

{
  "compilerOptions": {
    "target": "es2019",
    "types": [
      "node",
      "webdriverio/sync",
      "

步骤10:配置wdio.conf.ts文件

wdio.conf.ts文件已经有很多自我生成的代码，所以我们可能不需要所有的这些代码。你可以复制并粘贴下面的代码。

export const config: WebdriverIO.Config = {
 
 specs: [
        './test/**/*.ts'
    ],
 capabilities: [{
        browserName: 'chrome', 
        maxInstances: 1,       
    }],    
    framework: 'Jasmine',  
    jasmineOpts: {
        defaultTimeoutInterval: 120000,
    },
    autoCompileOpts: {
        autoCompile: true,
        // for all available options
        tsNodeOpts: {
            transpileOnly: true,
            project: 'tsconfig.json'
        },
    }
}

第11步：为WebdriverIO Typescript项目编写第一个页面-对象文件

让我们尝试创建一个简单的谷歌搜索测试案例。

导航到测试 文件夹，打开pages 文件夹，创建一个名为example.page.ts的新文件。

所以，example.page.ts的位置是test/pages/example.page.ts。

添加下面的代码：

//

步骤12：为WebdriverIO Typescript项目编写第一个规范文件

导航到test/specs/,并创建新的文件，名为example.spec.ts

复制并粘贴下面的代码到example.spec.ts。

//example.spec.ts

第13步：执行WDIO Typescript测试

一旦你完成了上述所有的测试，用下面的命令运行你的测试。

npx wdio run ./wdio.conf.ts

第14步: 控制台中的WDIO测试结果

测试开始执行，你会在命令行中看到结果。

设置WebdriverIO时可能会遇到的问题

为什么Chrome浏览器不能在WebdriverIO中启动？

这个问题主要与你的配置文件有关，即wdio.conf.ts。请正确检查您的设置。

为什么我得到".setText()? .click()不是WebdriverIO的一个函数？"

如果你使用的是异步模式，通常你会得到这样的结果；用await对你的web元素进行前缀，问题就会得到解决。

为什么我的WebdriverIO测试没有执行？

有时有很多Selenium Webdriver实例在运行，这可能导致你的测试在执行时表现得很奇怪。你可能需要重新启动系统或杀死所有的Web驱动实例。

关于WebdriverIO的常见问题

  • WebdriverIO是基于Selenium的吗？

是的，WebdriverIO内部使用Selenium NodeJS绑定。

  • WebdriverIO是否支持本地移动应用程序？

是的，WDIO支持本地移动应用程序。

  • WebdriverIO支持哪些选择器？

WebdriverIO支持所有主要的选择器，包括CSS选择器和Xpath。

  • WebdriverIO支持的浏览器有哪些？

WebdriverIO支持所有主要的浏览器。

  • Chrome - ChromeDriver

  • 火狐 - Geckodriver

  • 微软Edge - Edge Driver

  • Internet Explorer - InternetExplorerDriver

  • Safari - SafariDriver

  • 我可以将Webdriver项目配置到CI/CD工具，如Jenkins、Azure DevOps等吗？

是的，WebdriverIO项目可以被配置到CI/CD工具。

  • WebdriverIO支持哪些框架或断言库？

WebdriverIO目前支持Mocha、Jasmine和Cucumber断言库或框架。

  • WebdriverIO是否支持并行运行测试？

是的，WebdriverIO支持并行测试运行。你只需要配置你的 wdio.conf文件就可以了。

  • 我如何在WebdriverIO中运行一个规格或测试文件？

你可以使用下面的命令在webdriverIO中运行你的单一规格或测试。

npx wdio run ./wdio.conf.js --spec test/specs/example.e2e.js

  • 我如何在WebdriverIO上进行截图？

WebdriverIO提供屏幕截图功能。查看这篇关于如何在webdriverIO中进行屏幕截图的详细文章。

鼓励我写更多的文章，请我喝杯咖啡。

如果你在寻找任何帮助、支持或指导，请联系我。

avatar
文章
阅读
粉丝