Selenium 4 is launching “soon”. The most exciting news: Selenium will be W3C standardized.

Selenium4即將“發(fā)射”。 最令人振奮的消息是：Selenium將被W3C標(biāo)準(zhǔn)化。

Browsers, such as Chrome, Firefox, Safari are all following W3C standardization, so from now on browser drivers will interact with Selenium WebDriver in W3C standard protocol.

Chrome，Firefox，Safari等瀏覽器都遵循W3C標(biāo)準(zhǔn)化，因此從現(xiàn)在開(kāi)始，瀏覽器驅(qū)動(dòng)程序?qū)⒁訵3C標(biāo)準(zhǔn)協(xié)議與Selenium WebDriver交互。

Why is this very, very cool? To date, some Selenium commands worked differently on different browsers. As automation engineers, we had to modify our code to deal with those changes. The new version will bring standardization and stability and will not require you to modify your code to work with different browsers. Cheers to that!

為什么這非常非常酷？ 迄今為止，某些Selenium命令在不同的瀏覽器上的工作方式有所不同。 作為自動(dòng)化工程師，我們必須修改代碼以應(yīng)對(duì)這些更改。 新版本將帶來(lái)標(biāo)準(zhǔn)化和穩(wěn)定性，并且不需要您修改代碼即可與其他瀏覽器一起使用。 為此加油！

Prepare the local environment

準(zhǔn)備當(dāng)?shù)丨h(huán)境

I will be working with C# Selenium WebDriver so let’s download and install the latest .NET Core.

我將使用C＃Selenium WebDriver，因此讓我們下載并安裝最新的.NET Core。

Download the .NET Core DSK kit from the Microsoft site從Microsoft網(wǎng)站下載.NET Core DSK工具包Install the dotnet SDK安裝dotnet SDK

After installation, open the CMD prompt and type in “dotnet”. You should see the message like shown below:

安裝后，打開(kāi)CMD提示符并鍵入“ dotnet”。 您應(yīng)該看到如下所示的消息：

Awesome, .NET Core is now up on a local machine and we should start using it, right? Well, in order to proceed, we will need an IDE. I like to use Visual Studio so let’s install the latest Community version.

太棒了，.NET Core現(xiàn)在位于本地計(jì)算機(jī)上，我們應(yīng)該開(kāi)始使用它，對(duì)嗎？ 好吧，為了繼續(xù)進(jìn)行，我們將需要一個(gè)IDE。 我喜歡使用Visual Studio，所以讓我們安裝 最新的社區(qū)版本。

Download and install the VS Community version下載并安裝VS社區(qū)版本

Now Select .NET desktop development and click Install.

現(xiàn)在，選擇.NET桌面開(kāi)發(fā)，然后單擊安裝。

After installation, run the Visual Studio and select “Create a new project”:

安裝后，運(yùn)行Visual Studio并選擇“創(chuàng)建新項(xiàng)目”：

Pick NUnit Test Project (.NET Core) and click the Next button.

選擇NUnit測(cè)試項(xiàng)目(.NET Core)，然后單擊“下一步”按鈕。

Select NUnit Test Project選擇NUnit測(cè)試項(xiàng)目

Name it and click on Create.

為其命名并單擊Create 。

I named it “HelloWorld”我將其命名為“ HelloWorld”

Your screen should look like this:

您的屏幕應(yīng)如下所示：

Default unit test默認(rèn)單元測(cè)試

Select View > Test Explorer to bring up the Test Explorer window.

選擇查看>測(cè)試資源管理器以打開(kāi)“測(cè)試資源管理器”窗口。

Click on the Run and verify result.

單擊運(yùn)行并驗(yàn)證結(jié)果。

Initial test passed初步測(cè)試通過(guò)

In order to install necessary packages, navigate to Project > Manage NuGet Packages, search for “selenium” and Install first three from the list:

為了安裝必要的軟件包，請(qǐng)導(dǎo)航至“項(xiàng)目”>“管理NuGet軟件包”，搜索“ selenium”并從列表中安裝前三個(gè)：

• Selenium.WebDriver
  Selenium.WebDriver
• Selenium.Support
  Selenium支持
• Selenium.WebDriver.ChromeDriver
  Selenium.WebDriver.ChromeDriver

Update the UnitTest1.cs class like shown below and run the test. The test will open the Chrome browser. You should navigate to the Google home page, validate the page title, and close the session.

如下所示更新UnitTest1.cs類(lèi)，然后運(yùn)行測(cè)試。 測(cè)試將打開(kāi)Chrome瀏覽器。 您應(yīng)該導(dǎo)航到Google主頁(yè)，驗(yàn)證頁(yè)面標(biāo)題，然后關(guān)閉會(huì)話(huà)。

using NUnit.Framework;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;namespace HelloWorld
{
public class Tests
{
public IWebDriver driver;[SetUp]
public void Setup()
{
driver = new ChromeDriver();
driver.Navigate().GoToUrl("https://www.google.com/");
}[Test]
public void Test1()
{
Assert.AreEqual("Google", driver.Title);
}[TearDown]
public void Close()
{
driver.Close();
}
}
}

Move to Selenium 4 alpha

移至Selenium 4 alpha

Now for the exciting part: let’s move to the latest Selenium 4.0.0 alpha 5 version!

現(xiàn)在開(kāi)始激動(dòng)人心的部分：讓我們轉(zhuǎn)到最新的Selenium 4.0.0 alpha 5版本！

Bring up the Package Manager Console (View > Other Windows > Package Manager Console)…

調(diào)出Package Manager控制臺(tái)(視圖>其他Windows> Package Manager控制臺(tái))…

…and type in the commands shown below, one by one:

…并一一輸入以下命令：

Install-Package Selenium.Support -Version 4.0.0-alpha05

安裝軟件包Selenium.Support-版本4.0.0-alpha05

Install-Package Selenium.WebDriver -Version 4.0.0-alpha05

安裝軟件包Selenium.WebDriver-版本4.0.0-alpha05

Find packages updated to the new version:

查找更新為新版本的軟件包：

Go back to UnitTest1.cs class select ChromeDriver() and click f12:

返回UnitTest1.cs類(lèi)，選擇ChromeDriver()并單擊f12：

We are now using Selenium 4 alpha. Good!

我們現(xiàn)在正在使用Selenium 4 alpha。 好！

Selenium 4 Relative Locators

Selenium4相對(duì)定位器

Relative aka Friendly locators are the brand new way of fetching an UI web element by using the location of another (known) element. There are five overloaded methods that can accept By or IWebElement parameters:

相對(duì)(又稱(chēng)友好)定位器是使用另一個(gè)(已知)元素的位置來(lái)獲取UI Web元素的全新方法。 有五個(gè)可以接受By或IWebElement參數(shù)的重載方法：

Above — finds an element that’s above a known element

上方-查找已知元素上方的元素

Below — finds an element that’s below a known element

低于-查找低于已知元素的元素

LeftOf — finds an element that sits on the left of a known element

LeftOf —查找位于已知元素左側(cè)的元素

RightOf — finds an element that sits on the right of a known element

RightOf-查找位于已知元素右邊的元素

Near — finds an element that sits in a circle of 50 pixels of a known element. Distance is configurable

“附近” —查找一個(gè)位于已知元素的50像素圓內(nèi)的元素。 距離是可配置的

All of those methods are called on a static RelativeBy.WithTagName(<tag of the searched element>) method. If you think about it, it definitely makes sense to use some sort of “element identification”. For example, if we use LeftOf() method, we can found loads of elements that sit on the left side such as input fields, lists, buttons, images, etc. With WithTagName() method, we say what kind of element we are searching for, by its tag name.

所有這些方法都在靜態(tài)RelativeBy.WithTagName(<搜索元素的標(biāo)簽>)方法上調(diào)用。 如果您考慮一下，使用某種“元素識(shí)別”絕對(duì)是有意義的。 例如，如果我們使用LeftOf()方法，我們可以找到位于左側(cè)的大量元素，例如輸入字段，列表，按鈕，圖像等。使用WithTagName()方法，我們可以說(shuō)我們是哪種元素通過(guò)其標(biāo)簽名稱(chēng)進(jìn)行搜索。

Search for the element on the right搜索右邊的元素

See the sample above; in this case, we are searching for a button that sits on the right side of a header logo image.

參見(jiàn)上面的示例； 在這種情況下，我們正在搜索位于標(biāo)題徽標(biāo)圖像右側(cè)的按鈕。

What is even better, we can combine those methods and find an element more efficient way. I like to call it Super Mario way. The same way we use controls to climb stairs in the arcade game.

更好的是，我們可以將這些方法結(jié)合起來(lái)，找到更有效的元素。 我喜歡稱(chēng)之為超級(jí)馬里奧方式。 我們?cè)诮謾C(jī)游戲中使用控件爬樓梯的方式相同。

Run, Super Mario, run!

快跑，超級(jí)馬里奧，快跑！

I updated the HelloWorld project used in the begging. Let’s get to work!

我更新了乞討中使用的HelloWorld項(xiàng)目。 讓我們開(kāi)始工作吧！

using NUnit.Framework;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;namespace HelloWorld
{
public class Tests
{
public IWebDriver driver;[SetUp]
public void Setup()
{
driver = new ChromeDriver();
//using a demo online shopping app
driver.Navigate().GoToUrl("http://automationpractice.com/index.php");
driver.Manage().Window.Maximize();
}[Test]
public void Test1()
{
//this is an old way of using WebDriver - just to make sure it works on version 4.0.0 :)
Assert.AreEqual("My Store", driver.Title);
IWebElement SearchInput = driver.FindElement(By.Name("search_query"));
IWebElement SearchButton = driver.FindElement(By.Name("submit_search"));
SearchInput.SendKeys("demo");
SearchButton.Click();//try to click on the search button that's above menu
SearchInput = driver.FindElement(By.Name("search_query"));
SearchInput.SendKeys(" demo 2");
driver.FindElement(RelativeBy.WithTagName("button").Above(By.Id("block_top_menu"))).Click();
SearchInput = driver.FindElement(By.Name("search_query"));
SearchInput.SendKeys(" xxx");//try to click on the search button looking from the logo (it's on the right side)
driver.FindElement(RelativeBy.WithTagName("button").RightOf(By.Id("header_logo"))).Click();//click on the Logo image that's on the left of search input field and below the telephone icon
driver.FindElement(RelativeBy.WithTagName("a")
.LeftOf(By.Id("search_query_top"))
.Below(By.ClassName("icon-phone"))).Click();//add black blose to the chart. the second on the list
driver.FindElement(RelativeBy.WithTagName("span")
.RightOf(By.XPath("(//ul[@id='homefeatured']//img)[1]"))
).Click();
}[TearDown]
public void Close()
{
driver.Close();
}
}
}

Above() method

Above()方法

See the code given below; we are trying to click on an element with the tag “button” that sits above the menu.

參見(jiàn)下面給出的代碼； 我們正在嘗試單擊菜單上方帶有“按鈕”標(biāo)簽的元素。

driver.FindElement(RelativeBy.WithTagName("button").Above(By.Id("block_top_menu"))).Click();

Click on the element on the left, below a known one

單擊一個(gè)已知元素下方的左側(cè)元素

In this case, we are trying to click on the company logo that will take us to a home page. It is located right under the telephone icon and has an input field, and has an element with id = ‘search_query_top’ on the right.

在這種情況下，我們嘗試單擊公司徽標(biāo)，該徽標(biāo)將帶我們進(jìn)入主頁(yè)。 它位于電話(huà)圖標(biāo)的正下方，具有輸入字段，并且在右側(cè)具有id ='search_query_top'的元素。

Note: besides using By.Id and By.ClassName we can also use IWebElement objects.

注意：除了使用By.Id和By.ClassName，我們還可以使用IWebElement對(duì)象。

driver.FindElement(RelativeBy.WithTagName("a")
.LeftOf(By.Id("search_query_top"))
.Below(By.ClassName("icon-phone"))).Click();

Click on an element on the right of a known one

單擊已知元素右側(cè)的元素

This case shows the real power of relative locators. On the home page, we have the list of “popular best sellers”. In case we want to click on the second item in the list, simply call Relative Locators as shown below:

這種情況顯示了相對(duì)定位器的真正力量。 在主頁(yè)上，我們列出了“最受歡迎的暢銷(xiāo)書(shū)”。 如果我們要單擊列表中的第二項(xiàng)，只需調(diào)用相對(duì)定位器，如下所示：

driver.FindElement(RelativeBy.WithTagName("span")
.RightOf(By.XPath("(//ul[@id='homefeatured']//img)[1]"))
).Click();

If we run the test, it will add the black blouse to the chart:

如果我們運(yùn)行測(cè)試，它將在圖表中添加黑色上衣：

What if screen resolution changes?

如果屏幕分辨率發(fā)生變化怎么辦？

One question that popped up was: What if the screen resolution changes? Will it bring the test down? It is a real-life scenario, right? During the test creation process, we can use high-end monitors with high resolution and if we run it with some sort of task scheduler on a remote server — I guess, it could fail.

出現(xiàn)的一個(gè)問(wèn)題是：如果屏幕分辨率發(fā)生變化怎么辦？ 它將使測(cè)試失敗嗎？ 這是現(xiàn)實(shí)生活中的場(chǎng)景，對(duì)吧？ 在測(cè)試創(chuàng)建過(guò)程中，我們可以使用高分辨率的高端監(jiān)視器，如果我們?cè)谶h(yuǎn)程服務(wù)器上使用某種任務(wù)調(diào)度程序運(yùn)行它，我可能會(huì)失敗。

I am going to run the same test, in a debugging mode and stop on the line:

我將在調(diào)試模式下運(yùn)行相同的測(cè)試，然后停止運(yùn)行：

//try to click on the search button looking from the logo (it's on the right side)
driver.FindElement(RelativeBy.WithTagName("button").RightOf(By.Id("header_logo"))).Click();

Now, I am going to resize the browser screen until the input field and the button goes under the logo.

現(xiàn)在，我將調(diào)整瀏覽器屏幕的大小，直到輸入字段和按鈕位于徽標(biāo)下方。

Resized browser window調(diào)整大小的瀏覽器窗口

Now, continue the test run!

現(xiàn)在，繼續(xù)測(cè)試運(yùn)行！

Test failed測(cè)試失敗

The test failed! That is good.

測(cè)試失敗！ 那很好。

The bad thing is that we should be very careful when it comes to responsive design.

不好的是，在進(jìn)行響應(yīng)式設(shè)計(jì)時(shí)，我們應(yīng)該非常小心。

When will it go live?

它什么時(shí)候上線？

Well, back in 2018 Simon Stewart, the founding member of Selenium, had officially confirmed the release date and some of the major updates for Selenium 4 at the Selenium Conference in Bangalore.

好吧，早在2018年，Selenium的創(chuàng)始成員Simon Stewart在班加羅爾Selenium會(huì)議上就正式確認(rèn)了Selenium 4的發(fā)布日期和一些重要更新。

The new (4.0) version of the Selenium was meant to be released by Christmas 2018. Currently, we are on the alpha 5 version so I guess it will be released in a year from now. There are still some bugs that are about to be fixed. Until released, we can play with alpha versions and prepare for an interesting future.

Selenium的新(4.0)版本本應(yīng)在2018年圣誕節(jié)之前發(fā)布。目前，我們使用的是alpha 5版本，所以我想它將在一年后發(fā)布。 還有一些錯(cuò)誤將要修復(fù)。 在發(fā)布之前，我們可以使用Alpha版本并為有趣的未來(lái)做準(zhǔn)備。

Is this a game-changer?

這是改變游戲規(guī)則的人嗎？

I do not think so. It is a cool concept of having a possibility to fetch an element in a different way, especially for those with dynamic attributes or even those with just one attribute. In the end, I do not see loads of locators fetched that way in the near future.

我不這么認(rèn)為。 這是一個(gè)很酷的概念，它有可能以一種不同的方式來(lái)獲取元素，尤其是對(duì)于那些具有動(dòng)態(tài)屬性的元素甚至是只有一個(gè)屬性的元素。 最后，我看不到在不久的將來(lái)會(huì)以這種方式獲取定位器的負(fù)載。

However, Selenium 4 has other cool stuff that can make our life easier and I’ll try to cover those as well.

但是，Selenium 4還有其他一些很酷的東西，可以使我們的生活更輕松，我也將盡力介紹這些東西。

Till the next time, happy testing!

直到下一次，祝您測(cè)試愉快！

翻譯自: https://medium.com/maestral-solutions/a-sneak-peek-into-selenium-4-0-relative-locators-with-net-core-3-1-127e738dcb6b

總結(jié)

以上是生活随笔為你收集整理的偷窥Selenium4 0带有网芯的相对定位器3 1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。