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

Selenium4即將“發射”。 最令人振奮的消息是：Selenium將被W3C標準化。

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標準化，因此從現在開始，瀏覽器驅動程序將以W3C標準協議與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命令在不同的瀏覽器上的工作方式有所不同。 作為自動化工程師，我們必須修改代碼以應對這些更改。 新版本將帶來標準化和穩定性，并且不需要您修改代碼即可與其他瀏覽器一起使用。 為此加油！

Prepare the local environment

準備當地環境

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網站下載.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:

安裝后，打開CMD提示符并鍵入“ dotnet”。 您應該看到如下所示的消息：

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現在位于本地計算機上，我們應該開始使用它，對嗎？ 好吧，為了繼續進行，我們將需要一個IDE。 我喜歡使用Visual Studio，所以讓我們安裝 最新的社區版本。

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

Now Select .NET desktop development and click Install.

現在，選擇.NET桌面開發，然后單擊安裝。

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

安裝后，運行Visual Studio并選擇“創建新項目”：

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

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

Select NUnit Test Project選擇NUnit測試項目

Name it and click on Create.

為其命名并單擊Create 。

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

Your screen should look like this:

您的屏幕應如下所示：

Default unit test默認單元測試

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

選擇查看>測試資源管理器以打開“測試資源管理器”窗口。

Click on the Run and verify result.

單擊運行并驗證結果。

Initial test passed初步測試通過

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

為了安裝必要的軟件包，請導航至“項目”>“管理NuGet軟件包”，搜索“ selenium”并從列表中安裝前三個：

• 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類，然后運行測試。 測試將打開Chrome瀏覽器。 您應該導航到Google主頁，驗證頁面標題，然后關閉會話。

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!

現在開始激動人心的部分：讓我們轉到最新的Selenium 4.0.0 alpha 5版本！

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

調出Package Manager控制臺(視圖>其他Windows> Package Manager控制臺)…

…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類，選擇ChromeDriver()并單擊f12：

We are now using Selenium 4 alpha. Good!

我們現在正在使用Selenium 4 alpha。 好！

Selenium 4 Relative Locators

Selenium4相對定位器

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:

相對(又稱友好)定位器是使用另一個(已知)元素的位置來獲取UI Web元素的全新方法。 有五個可以接受By或IWebElement參數的重載方法：

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 —查找位于已知元素左側的元素

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

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

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.

所有這些方法都在靜態RelativeBy.WithTagName(<搜索元素的標簽>)方法上調用。 如果您考慮一下，使用某種“元素識別”絕對是有意義的。 例如，如果我們使用LeftOf()方法，我們可以找到位于左側的大量元素，例如輸入字段，列表，按鈕，圖像等。使用WithTagName()方法，我們可以說我們是哪種元素通過其標簽名稱進行搜索。

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.

參見上面的示例； 在這種情況下，我們正在搜索位于標題徽標圖像右側的按鈕。

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.

更好的是，我們可以將這些方法結合起來，找到更有效的元素。 我喜歡稱之為超級馬里奧方式。 我們在街機游戲中使用控件爬樓梯的方式相同。

Run, Super Mario, run!

快跑，超級馬里奧，快跑！

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

我更新了乞討中使用的HelloWorld項目。 讓我們開始工作吧！

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.

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

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

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

單擊一個已知元素下方的左側元素

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.

在這種情況下，我們嘗試單擊公司徽標，該徽標將帶我們進入主頁。 它位于電話圖標的正下方，具有輸入字段，并且在右側具有id ='search_query_top'的元素。

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

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

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

單擊已知元素右側的元素

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:

這種情況顯示了相對定位器的真正力量。 在主頁上，我們列出了“最受歡迎的暢銷書”。 如果我們要單擊列表中的第二項，只需調用相對定位器，如下所示：

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:

如果我們運行測試，它將在圖表中添加黑色上衣：

What if screen resolution changes?

如果屏幕分辨率發生變化怎么辦？

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.

出現的一個問題是：如果屏幕分辨率發生變化怎么辦？ 它將使測試失敗嗎？ 這是現實生活中的場景，對吧？ 在測試創建過程中，我們可以使用高分辨率的高端監視器，如果我們在遠程服務器上使用某種任務調度程序運行它，我可能會失敗。

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

我將在調試模式下運行相同的測試，然后停止運行：

//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.

現在，我將調整瀏覽器屏幕的大小，直到輸入字段和按鈕位于徽標下方。

Resized browser window調整大小的瀏覽器窗口

Now, continue the test run!

現在，繼續測試運行！

Test failed測試失敗

The test failed! That is good.

測試失敗！ 那很好。

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

不好的是，在進行響應式設計時，我們應該非常小心。

When will it go live?

它什么時候上線？

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的創始成員Simon Stewart在班加羅爾Selenium會議上就正式確認了Selenium 4的發布日期和一些重要更新。

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)版本本應在2018年圣誕節之前發布。目前，我們使用的是alpha 5版本，所以我想它將在一年后發布。 還有一些錯誤將要修復。 在發布之前，我們可以使用Alpha版本并為有趣的未來做準備。

Is this a game-changer?

這是改變游戲規則的人嗎？

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.

我不這么認為。 這是一個很酷的概念，它有可能以一種不同的方式來獲取元素，尤其是對于那些具有動態屬性的元素甚至是只有一個屬性的元素。 最后，我看不到在不久的將來會以這種方式獲取定位器的負載。

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!

直到下一次，祝您測試愉快！

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。