WebdriverIO 是基于 nodeJs 构建的基于 JavaScript 的测试自动化框架。它是为自动化测试社区开发的开源项目。WebdriverIO 可扩展、兼容、功能丰富且易于安装。这被认为是支持桌面浏览器和移动应用程序的下一代测试自动化框架。这使得 WebDriverIO…
October 1, 2021
WebDriverIO 教程三：Selenium 测试的浏览器命令, Browser Commands for Selenium Testing, WebDriverIO 教程, WebDriverIO 入门
WebdriverIO 是一个非常著名的用于自动化测试的端到端 JavaScript 框架。它基于 Node.js，可以在 WebdriverIO 浏览器命令的帮助下进一步帮助您在浏览器上自动化用户活动。WebDriverIO 浏览器命令用于直接在浏览器上执行某些操作。有几个例子：打开浏览器，查找元素，向前、向后导航，刷新页面也关闭浏览器。
在 Selenium 中，创建了一个驱动程序对象来与浏览器交互。但是，在 WebDriverIO 中，您可以设置 WebDriverIO 测试运行器以直接使用全局初始化的“驱动程序”或“浏览器”对象。在本 WebDriverIO 教程中，我将介绍“浏览器”对象以及如何使用它们。运行脚本时，浏览器会话会自动初始化并关闭。您不必在 WebDriverIO 中单独创建对象。
在我们之前的WebdriverIO 教程中，我已经介绍了更多关于 WebdriverIO 的基础知识以及如何运行 WedbdriverIO 脚本的内容。在本 WebdriverIO 教程中，我将重点介绍在 WebDriverIO 中处理 Selenium 自动化脚本时可能面临的主要挑战。我将在本 WebDriverIO 教程和示例中，通过用于Selenium 测试的相应 WebdriverIO 命令进一步为所有这些问题提供解决方案。
如何使用 WebdriverIO 命令处理浏览器窗口？
在本 WebdriverIO 教程中，我现在将讨论您在处理浏览器窗口以运行 Selenium 测试自动化脚本时可能遇到的一些主要问题。这包括查找您的浏览器窗口大小、它的规格以及您可以在这些浏览器上执行的其他操作。
如何使用 WebdriverIO 查找窗口大小？
此命令返回当前窗口大小。基本上，getWindowSize()当您想在特定浏览器大小上运行自动化脚本时会有所帮助。此命令的输出格式为 { height: 798, width: 1200, x: 22, y: 45 }
句法：
browser.getWindowSize()
示例：在控制台上打印当前浏览器窗口大小
describe("Browser Commands ", function() {
it("getWindowSize example ", function() {
browser.url("https://justcode.ikeepstudying.com/");
console.log(browser.getWindowSize());
});
});
如何使用 WebdriverIO 指定窗口大小？
有时，我们想设置浏览器的特定高度和宽度。在这种情况下，setWindowSize()会帮助你。它需要两个参数，高度和宽度作为整数。
句法：
browser.setWindowSize(width, height)
示例：打开当前浏览器并更改该浏览器的宽度和高度。
describe("Browser Commands ", function() {
it("setWindowSize example ", function() {
browser.url("https://www.ikeepstudying.com/"); browser.setWindowSize(100, 300); browser.pause(5000); console.log(browser.getWindowSize()); }); });
如何使用 WebdriverIO 打开一个新窗口？
newWindow当您想在新的浏览器窗口中打开一个新的 url 时使用命令。包括的其他参数是windoname 和窗口功能。您可以使用它们分别设置窗口的名称及其大小、位置等。
句法：
browser.newWindow(url, NewWindowName, NewWindowsFeature)
示例：打开两个 URL https://www.ikeepstudying.com/，https://www.google.com/然后在新打开的窗口中搜索特定文本
describe("Browser Commands ", function() {
it("newWindow example ", function() {
browser.url("https://www.ikeepstudying.com/"); browser.newWindow( "https://www.google.com/", "Google Window", "width=800,height=700,resizable,scrollbars=yes,status=1" ); browser.pause(5000); console.log(browser.getTitle()); // opening Google and writing text on newly opened window $(".//input[@name='q']").setValue("lambdatest.com"); browser.pause(5000); }); });
如何使用 WebdriverIO 关闭浏览器窗口？
closeWindow命令与 newWindow 命令非常相似。closeWindow命令有助于在脚本执行之间关闭浏览器。请记住，closeWindow 不会关闭主浏览器。如果浏览器上下文没有被处理并且没有发现父/主上下文，那么它将关闭所有浏览器。
句法
browser.closeWindow()
示例：打开 url https://www.ikeepstudying.com/，https://www.google.com/然后关闭所有打开的浏览器。
describe("Browser Commands ", function() {
it("closeWindow example ", function() {
browser.url("https://www.ikeepstudying.com/"); browser.newWindow( "https://www.google.com/", "Google Window", "width=800,height=700,resizable,scrollbars=yes,status=1" ); browser.pause(5000); console.log(browser.getTitle()); // print google title browser.pause(5000); browser.closeWindow(); }); });
如何使用 WebdriverIO 切换浏览器窗口？
switchWindow()命令有助于自动切换到特定的浏览器/选项卡。它采用字符串参数作为 url 或浏览器标题名称。
句法：
browser.switchWindow(urlOrTitleOfWindow)
示例：打开两个 URL https://www.ikeepstudying.com/，https://www.google.com/然后打印第一个 URL 标题，然后打印第二个浏览器标题
describe("Browser Commands ", function() {
it("swtichWindow example ", function() {
browser.url("https://www.ikeepstudying.com/");
browser.newWindow(
"https://www.google.com/",
"Google Window",
"width=800,height=700,resizable,scrollbars=yes,status=1"
);
browser.pause(5000);
console.log(browser.getTitle()); // print google title
browser.switchWindow("https://www.ikeepstudying.com/");
browser.pause(5000);
console.log(browser.getTitle()); // print landatest title
$("=Automation").click();
browser.switchWindow("Google");
console.log(browser.getTitle()); // print google title
});
});
如何使用 WebdriverIO 最大化浏览器窗口？
maximizeWindow命令帮助浏览器最大化浏览器窗口以进行自动化浏览器测试。
句法：
browser.maximizeWindow()
例子：
describe("Browser Commands ", function() {
it("maximize Command", function() {
browser.url("https://www.ikeepstudying.com/");
browser.maximizeWindow();
$("=Automation").click();
});
});
如何使用 WebdriverIO 最小化浏览器窗口？
minimizeWindow帮助用户在执行过程中最小化窗口。请注意，即使浏览器窗口已最小化，脚本仍会继续执行而不会出现任何错误。下面的例子显示，即使浏览器最小化，脚本也能成功点击自动化链接。
句法：
browser.minimizeWindow()
示例：最小化浏览器窗口后，单击LambdaTest url 的自动化链接。
describe("Browser Commands ", function() {
it("minimize Command", function() {
browser.url("https://www.ikeepstudying.com/");
browser.maximizeWindow();
browser.pause(5000);
browser.minimizeWindow();
$("=Automation").click();
});
});
如何使用 WebdriverIO 在浏览器上全屏显示？
使用该fullscreenWindow命令，可以在全屏上看到浏览器。如果可见，它会隐藏浏览器菜单栏和书签。
句法：
browser.fullscreenWindow()
示例：以全屏模式打开 url，然后单击自动化。
describe("Browser Commands ", function() {
it("fullscreenWindow Command", function() {
browser.url("https://www.ikeepstudying.com/");
browser.pause(5000);
browser.fullscreenWindow();
$("=Automation").click();
});
});
如何使用 WebdriverIO 浏览器命令导航浏览器窗口？
在执行 Selenium 测试自动化时，您必须导航到不同的 Url，包括您在当前 URL 之前使用过的 URL。在本 WebdriverIO 教程中，我将进一步解决您可能面临的问题。
如何使用 WebdriverIO 在同一窗口中打开新 URL？
navigateTo 命令帮助您在同一个打开的浏览器上打开一个新的 url。
句法：
browser.navigateTo(url)
示例：打开 URL https://www.ikeepstudying.com/，然后导航到https://www.google.com/同一页面上的新 URL 。
describe("Browser Commands ", function() {
it("NavigateTo Command", function() {
browser.url("https://www.ikeepstudying.com/");
const title = browser.getTitle();
console.log(title);
browser.navigateTo("https://www.google.com/");
});
});
如何使用 WebdriverIO 导航到上一页？
back()命令有助于自动化任何页面的后退按钮。使用此命令可以返回到打开浏览器的上一页。
句法：
browser.back()
示例：打开 URl https://www.ikeepstudying.com/，然后导航到https://www.google.com/同一页面上的新 URL，然后再次返回到旧 URL。
describe("Browser Commands ", function() {
it("Back() Command", function() {
browser.url("https://www.ikeepstudying.com/");
const title = browser.getTitle();
console.log(title);
browser.navigateTo("https://www.google.com/");
browser.back();
const title = browser.getTitle();
console.log(title);
});
});
如何使用 WebdriverIO 导航到转发 URL？
转发有助于从当前 Web URL 导航到forwardURl。这将从浏览器历史记录中读取。如果未找到历史 url，则它将仅使用当前 url。要使用此 url，您需要使用 back() 来创建导航历史记录。
句法：
browser.forward();
示例：打开网址https://www.ikeepstudying.com/，然后导航到https://www.google.com/同一页面上的新网址，返回并转发该网址
describe("Browser Commands ", function() {
it("forward() Command", function() {
browser.url("https://www.ikeepstudying.com/");
const title = browser.getTitle();
console.log(title);
browser.navigateTo("https://www.google.com/");
browser.back();
browser.forword();
console.log(browser.getTitle());
});
});
如何使用 WebdriverIO 浏览器命令管理页面加载？
继续本 WebdriverIO 教程，我将详细介绍如何在给定时间内暂停执行、刷新网页以及如何在特定超时后加载页面。
如何使用 WebdriverIO 暂停页面加载？
Pause()方法用于在给定时间内暂停执行。参数以毫秒为单位传递。避免使用这种持续的停顿。这将增加执行时间，因为我们给出了特定的持续时间。它类似于 Thread.sleep()
句法
browser.pause(milliseconds)
示例：打开https://www.ikeepstudying.com/并等待 5000 毫秒，然后单击自动化链接
describe("Browser Commands ", function() {
it("Pause example ", function() {
browser.url("https://www.ikeepstudying.com/");
browser.pause(5000);
$("=Automation").click();
});
});
如何使用 WebdriverIO 刷新页面？
刷新是自动化中不太常用的命令。WebDriverIO 提供此命令来重新加载您当前的浏览器。
句法：
browser.refresh()
示例：打开 Url 并重新加载相同的 url。
describe("Browser Commands ", function() {
it("refresh() Command", function() {
browser.url("https://www.ikeepstudying.com/");
browser.refresh();
console.log(browser.getTitle());
});
});
如何使用 WebdriverIO 处理超时？
WebDriverIO 提供了一个超时命令来处理脚本注入执行，当前会话期间元素上的页面加载时间。时间的所有值都以毫秒为单位。
隐式：隐式等待等待给定的时间，如果在此持续时间内找到元素，则 WebDriverIO 执行操作，否则抛出元素未找到错误。在 Selenium中使用隐式等待的好处是它适用于 Selenium 测试自动化脚本中指定的所有 web 元素，直到 WebDriver 实例（或 IWebDriver 对象）处于活动状态pageLoad：执行等待页面完全加载所有资源。
脚本：脚本注入和执行应该在给定的超时到达结束之前完成。
超时命令应该写在 WebDriverIO 提供的钩子中，这样你就不必每次创建 JavaScript 文件时都写。
句法：
browser.setTimeout({ timeouts.implicit, timeouts.pageLoad, timeouts.script})
示例：打开一个 url 并单击元素
describe("Browser Commands ", function() {
it("timeout Command", function() {
browser.url("https://www.ikeepstudying.com/");
browser.setTimeout({ implicit: 10000, pageLoad: 10000, script: 5000 });
$("=Automationsssss").click(); // Wrong element selector and throw error after 10000 millisecond
});
});
注意：上面的例子给出了一个错误，即“Automationsssss”无法找到，因为我们给你一个隐式等待的例子。
其他重要的 WebdriverIO 浏览器命令
以下是 WebdriverIO 中其他一些重要的 browse.r 命令，可用于您的 Selenium 测试自动化脚本
如何使用 WebdriverIO 命令打开 URL
最基本和最常用的 WebDriverIO 浏览器命令之一是url(). 此命令帮助用户在配置的浏览器上打开 URL。参数 ‘String url’ 是可选的，如果未传递该参数，它将从 ‘wdio.conf.js’ 文件中选择 ‘baseUrl’
句法：
browser.url(String url)
示例：https://www.ikeepstudying.com/在浏览器中打开URL
describe("Browser Commands ", function() {
it("Open URL", function() {
browser.url("https://www.ikeepstudying.com/");
});
});
如何使用 WebdriverIO 捕获标题？
getTitle()用于捕获打开的浏览器标题的值。返回值被修剪，如果没有浏览器标题，它将返回一个空值。
标题
句法：
browser.getTitle()
示例：打开https://www.ikeepstudying.com/URL 并打印浏览器标题
describe("Browser Commands ", function() {
it("Open URL and print browser Title", function() {
browser.url("https://www.ikeepstudying.com/");
const title = browser.getTitle();
console.log(title);
});
});
如何使用 WebdriverIO 查找元素？
您可能熟悉 Java 中的 findElemnt() 方法。WebDriverIO 有一个类似的方法，’$()’。它会自动识别定位器并根据定位器找到元素。由于它是一个全局变量，您可以直接编写 $(String selector)。
该$()方法将仅返回一个 Web 元素。如果您想存储一个元素，然后将该元素存储在一个 const 变量中并执行一个操作。您还可以使用 $() 作为链选择器，即$(selector).$(selector).$(selector)，使用链选择器的优点是您可以进入 DOM 并选择特定元素。
句法：
browser.$(String selector)
或者
$(String selector )
示例：打开https://www.ikeepstudying.com/并单击自动化、定价和自动化标题链接
describe("Browser Commands ", function() {
it("Open URL and print browser Title and ClickOn Header Link", function() {
browser.url("https://www.ikeepstudying.com/");
const title = browser.getTitle();
console.log(title);
browser.$("=Automation").click();
// Or
$("=Pricing").click(); // Without writing 'browser' object
// Store element in elem variable using const
const elem = $("=Automation");
elem.click();
});
});
如何使用 WebdriverIO 查找多个元素？
>$$()类似于 $() 方法，但是 $() 返回单个 Web 元素，而 $$() 方法将返回一个元素数组。$$() 也是全局定义的，因此您可以直接编写 $$() 而不使用“浏览器”对象，它也可以用作支持链选择器。
句法：
browser.$$(String selector)
或者
或者
示例：阅读所有标题链接https://www.ikeepstudying.com/并打印其文本
describe("Browser Commands ", function() {
it("$$ example ", function() {
browser.url("https://www.ikeepstudying.com/");
const lstHeaderLinks = $$(".//*[@class='navbar-nav']/li");
lstHeaderLinks.forEach(element => {
console.log(element.getText());
});
});
});
如何使用 WebdriverIO 管理您的浏览器 Cookie？
deleteCookieWebDriverIO 命令是一个非常有用的浏览器命令。它帮助用户从浏览器会话中删除存储的 cookie。这将帮助用户删除参数中提供的特定 cookie。
要知道 cookie 的名称，您可以使用 browser.getAllCookies() 并打印控制台日志以获取有关 cookie 名称的更多信息。
如果要删除与打开的浏览器相关的所有 cookie，请使用 getAllCookies() WebDriverIO 命令。
句法：
browser.deleteCookie(nameOftheCookie)
示例：打开 url 并读取所有存储的 cookie，然后删除特定的 cookie。
describe("Browser Commands ", function() {
it("Cookies Command", function() {
browser.url("https://www.ikeepstudying.com/");
console.log(browser.getTitle());
console.log(browser.getAllCookies());
browser.deleteCookie("utm_medium");
browser.deleteAllCookies();
});
});
这就是所有的人
在本 WebDriverIO 教程中，我探索了一些非常基本且常用的 JavaScript 浏览器命令，用于Selenium 测试。这些 WebDriverIO 命令帮助用户根据浏览器配置来配置脚本。我希望这对你有帮助！
您甚至可以通过使用 WebdriverIo 和 Selenium Grid 来扩展自动化浏览器测试来执行并行测试。虽然维护自己的 Selenium Grid 可能非常详尽，但您可以选择 Cloud Selenium Grids 来扩展您的工作。要了解有关此主题的更多信息，您可以阅读我们之前的 WebDriverIO 教程。
测试愉快！
Related Posts
2020-11-30 亲测有效：IntelliJ IDEA 2020.2.3 最新激活破解方法, 激活到 2089 年
MongoDB 教程七: MongoDB和PHP结合开发
php 备份数据库 Backup Your MySQL Database Using PHP
About Author
Gideon
One Comment