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。

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，所以让我们安装 最新的社区版本。

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)，然后单击“下一步”按钮。

Name it and click on Create.

为其命名并单击Create 。

Your screen should look like this:

您的屏幕应如下所示：

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

选择查看>测试资源管理器以打开“测试资源管理器”窗口。

Click on the Run and verify result.

单击运行并验证结果。

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.WebDriverSelenium.WebDriver
• Selenium.SupportSelenium支持
• Selenium.WebDriver.ChromeDriverSelenium.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参数的重载方法：

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

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

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

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

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

   LeftOf —查找位于已知元素左侧的元素

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

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

5. 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()方法，我们可以说我们是哪种元素通过其标签名称进行搜索。

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.

现在，我将调整浏览器屏幕的大小，直到输入字段和按钮位于徽标下方。

Now, continue the test run!

现在，继续测试运行！

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!

直到下一次，祝您测试愉快！