How WebdriverIO Uses Selenium Locators in a Unique Way – A WebdriverIO Tutorial With Examples

Ramit DhamijaFebruary 7th, 2020Last Updated: January 29th, 2020

0 380 13 minutes read

In any automation testing framework, finding elements is the most fundamental activity. We have to choose web elements very carefully so that automation script execution can handle static and dynamic elements for stable test results. WebDriverIO has many advanced Selenium locators/ selector strategies compared to other automation testing frameworks. Traditionally, each locator has a specific By method which identifies the locators during runtime. However, WebdriverIO has simplified these By methods and now we do not have to specify them explicitly. WebdriverIO has the intelligence to identify which locator has been passed. By the end of this WebdriverIO tutorial, you will learn how WebDriverIO is transforming the way of Selenium locator strategy and how easy to remember and write it.

Note: If you refer to the official documentation of the WebdriverIO framework, you will notice that they have referred to Locators as Selectors. You need not get confused if you are familiar with some other test automation framework in Selenium. For example, if you have worked with Selenium Locators in Java, then those locators in WebdriverIO are addressed as Selectors.

For the ease of understanding, I will refer to them as Selenium locators in this WebdriverIO tutorial. As it is a more standardized and familiar term around automation testing with Selenium.

What are Selenium Locators In WebdriverIO?

Before we start off this WebdriverIO tutorial for Selenium locators/selectors, let us quickly understand what they are used for. Selenium locators are utilized to find elements on a web page through a Selenium WebDriver when a test automation script is executed. The Selector is a command in Selenium. Selenium library reads this command from the script, convert into an HTTP request and interact with Web browsers lastly, perform actions based on the command.

Selenium Locator Strategies

When you get hands-on Selenium automation testing using WebdriverIO, you should be aware of the correct strategy that works for locating unique elements on a web page. Finding elements by ID, Name and relative XPath would be the first choice to find a unique element from the website. If you could not find any of these ways then it is advisable to choose other types of the Selenium locators/ selector.

If you have performed Selenium automation testing with Java, you may have used findElement() and findElements() method to find the selector from DOM. However, WebdriverIO offers a unique way of Selenium testing with WebDriverIO. With WebdriverIO, you don’t have to mention the Selenium locator’s strategy as it will automatically understand which types of locator strategy should be used. We will look into each Selenium Locator in this WebdriverIO tutorial. Before we jump into practical demonstration, make sure to note down the below methods for finding elements in WebDriverIO:

$(): Single dollar sign used to find single web element
$$(): Double dollar sign used to find multiple web elements

Apart from these two methods, WebDriverIO Support other methods which are,

custom$(): used to find a custom strategy for a single web element
custom$(): used to find a custom strategy for multiples web elements

react$(): used to find single React component by their given name and it gets filter by props and state
react$$(): used to find multiples React components by their given name and it gets filter by props and state

Note: react$ and react$$ command only works with applications using React v16.x

How To Find A Web Element In Browser?

To find a web element in the browser, User has to go to the browser’s developer tools by pressing F12 in windows and option+command+i in Mac Operating System or right-clicking on a website and select inspect option.

Browser Developer Tools

When you open the developer tool, you can see HTML tags under the “Elements” tab. This HTML tab calls DOM elements. To find particular Web Elements, select the selector icon( before the Elements tab) and hover over the element you wish to find in the DOM.

Top 16 Tips To Use Chrome Dev Tools For Cross Browser Testing

List Of Selenium Locators In WebDriverIO

Now that you have a good understanding of Selenium Locators, let us see the different types of Selenium Locators in this WebdriverIO tutorial. The following are the supported selectors by the WebdriverIO.

CSS Query Selector
Link Text
Partial Link Text
Element with certain text
Tag Name
Name
xPath
ID
JS Function
Chain Selectors
React Selectors
Custom Selector

Using $, $$, Custom$, Custom$$, react$ and react$$ methods the user can find the elements and perform desired operations. Let’s deep dive at each one of these Selenium Locators in this WebdriverIO tutorial for Selenium automation testing with examples of a sample DOM.

CSS Query Selector

The first locator in this WebdriverIO tutorial for Selenium automation testing is the CSS Query selector, which is used to find the element from DOM.

How can you find CSS Query?

Go to developer tools and find the element and right click on Selected element in the DOM and copy CSS selector option.

Syntax: $(‘CSS Query’);

Example:

const assert = require("assert");
  
describe("Selector Example", function() {
   it("CSS Query Selector", function() {
       driver.url("https://lambdatest.github.io/sample-todo-app/");
       $("body > div.ng-scope > div > div > ul").click();     
   });
});

Output:

When you run the above script, you can find the console log and observed that WebdriverIO converted into findElement method with CSS selector strategy

[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: COMMAND findElement("css selector", "body > div.ng-scope > div > div > ul")
[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: [POST] http://127.0.0.1:4444/session/839505649081eaf3bef60a252593f2f9/element
[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: DATA { using: 'css selector',
 value: 'body > div.ng-scope > div > div > ul' }

Remember, Sometimes using CSS query selector could result in locating multiple elements as a CSS sheet used for the whole website. Now, let us head to the next Selenium locator in this WebdriverIO tutorial.

Link Text

A website is made up of different types of components e.g textbox, links, drop-down, etc. Even a single web page can have numerous links over it. Selecting a particular link for your Selenium automation testing script could become challenging. This is where Link Text as a Selenium Locators for WebdriverIO comes into play. If you want to find any hyperlink then use this link text selector strategy.

Syntax: $(‘=anchorText’);

Here, = equal to sign is used to find anchor element with ‘specific text’.

Example:

const assert = require("assert");
describe("Selector Example", function() {
   it("Open URL", function() { 
       driver.url("https://www.lambdatest.com/");     
   });
   it("Link Text Example", function() {
       $("=Automation").click();
   });
});

When you run the above automation testing script, you can find the console log. If you notice the logs you will observe that WebdriverIO has automatically detected the findElement method with link text strategy.

Output:

0-0] 2019-12-24T10:58:56.640Z INFO webdriver: COMMAND findElement("link text", "Automation")
[0-0] 2019-12-24T10:58:56.640Z INFO webdriver: [POST] http://127.0.0.1:4444/session/0a34df231b0b77c5e0e4d687a14829a2/element
[0-0] 2019-12-24T10:58:56.640Z INFO webdriver: DATA { using: 'link text', value: 'Automation' }

Be careful about the elements being selected by this Selenium Locator in WebdriverIO as it might lead to multiple anchors with the same link text. Now that we know of Link text, let us now head to the Partial link text locator in this WebdriverIO tutorial.

Partial Link Text

Partial link text is similar to link text but the only difference is that this helps when the starting few characters of a link are fixed and the rest are dynamic.

Syntax: $(‘=anchorMatchedText’);

*= start equal to sign is used to find an anchor element with the matched text’.

1	`$("=Automa")`

Example:

const assert = require("assert");
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.lambdatest.com/");
   });
   it("Partial Link Text Example", function() {
       $("*=Automa").click();
   });
});

When you run the above script, you can find the console log and observe that WebdriverIO converted into findElement method with partial link text strategy.

Output:

$(‘elementTag=certain text’); used for fixed text
$(‘elementTag*=partial text’); used for partial text

Element With Certain Text

In HTML every tag is known as an element and few elements have the direct text and few elements wrapped around other tags. If you want to find the element which has a certain or partial text then this selector is preferred to use.

While Selenium automation testing using Java, you would use XPath with normalize-space() method to find text along with HTML tag if you want to find HTML tag with some text but WebdriverIO uses the method below.

Syntax:

$(‘elementTag=certain text’); used for fixed text
$(‘elementTag*=partial text’); used for partial text

This selector takes help from = (equal to) and *= (start equal to) sign.

For instance, to find Cross Browser Testing Cloud from below H1 tag, using this command $(“h1=Cross Browser Testing Cloud”)

< h1 class=”big_title text_shadow_black __web-inspector-hide-shortcut__”>Cross Browser Testing Cloud< /h1>

The same thing will work for class and ID attribute of the elements. For example:

$(‘#id=certain text’); used for fixed text
$(‘#id*=certain text’); used for partial text
$(‘.classname=certain text’); used for fixed text
$(‘.classname*=partial text’); used for partial text

Here, # is used when you want to find elements by ID and . (dot) used for the class name.

Example:

const assert = require("assert");
  
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.lambdatest.com/");
   });
   it("Element with certain text Example", function() {
       $("h1=Cross Browser Testing Cloud").click();
   });
   it("Element with Partial text Example", function() {
       $("h1*=Cross Browser Testing").click();
   });
});

When you run the above script, you can find the console log and observe that WebdriverIO converted into findElement method with “normalize-space()” and “contains()”.

Output:

[0-0] 2019-12-24T11:39:33.082Z INFO webdriver: COMMAND findElement("xpath", ".//h1[normalize-space() = "Cross Browser Testing Cloud"]")
[0-0] 2019-12-24T11:39:33.082Z INFO webdriver: [POST] http://127.0.0.1:4444/session/423097da27eadf53b1fac0f11655e9be/element
[0-0] 2019-12-24T11:39:33.083Z INFO webdriver: DATA { using: 'xpath',
 value: './/h1[normalize-space() = "Cross Browser Testing Cloud"]' }
[0-0] 2019-12-24T11:39:33.099Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': '03328283-f372-423c-8218-48759ac98631' }
[0-0] 2019-12-24T11:39:33.104Z INFO webdriver: COMMAND elementClick("03328283-f372-423c-8218-48759ac98631")
[0-0] 2019-12-24T11:39:33.105Z INFO webdriver: [POST] http://127.0.0.1:4444/session/423097da27eadf53b1fac0f11655e9be/element/03328283-f372-423c-8218-48759ac98631/click
[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: COMMAND findElement("xpath", ".//h1[contains(., "Cross Browser Testing")]")
[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: [POST] http://127.0.0.1:4444/session/423097da27eadf53b1fac0f11655e9be/element
[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: DATA { using: 'xpath',
 value: './/h1[contains(., "Cross Browser Testing")]' }

Now, let us have a look at the Tag Name locator in this WebdriverIO tutorial for Selenium automation testing.

Tag Name

We use the tag name selector to find the element using any HTML tag. This is a very rarely used Selenium locator. However, this is very important if you are dealing with tables or calendar elements. While Selenium automation testing, you can pass the Tag Name as either of < tag > or < tag />.

Syntax:

$(‘<tag>’);
$(‘<tag />’);

Example:

const assert = require("assert");
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.lambdatest.com/");
   });
   it("Tag Name Example", function() {
       $("<h1>").getText();
   });
});

Here is the output when the above Selenium automation testing script is executed in WebdriverIO.

Output:

[0-0] 2019-12-26T10:07:37.804Z INFO webdriver: COMMAND findElement("tag name", "h1")
[0-0] 2019-12-26T10:07:37.804Z INFO webdriver: [POST] http://127.0.0.1:4444/session/d67eadf284b85ecd1e641855c194937b/element
2019-12-26T10:07:37.804Z INFO webdriver: DATA { using: 'tag name', value: 'h1' }

Name

This Selenium locator is similar to the ID Locator in Selenium. Sometimes a web developer gives a name to the HTML node. If a node has a name attribute then it is preferred to incorporate the Name locator in Selenium automation testing. The name selector has to be within square brackets with the name attribute.

Syntax:

1	`$(‘[<name attribute>]’)`

Example:

const assert = require("assert");
  
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.facebook.com/");
   });
   it("Name Example", function() {
       $("[name = 'email']").setValue("123");
   });
  
});

Output:

[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: COMMAND findElement("css selector", "[name = 'email']")
[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: [POST] http://127.0.0.1:4444/session/aee87e328f63eb11678a49adce17df4b/element
[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: DATA { using: 'css selector', value: '[name = \'email\']' }

XPath

An extremely pivotal Selenium locator of this WebdriverIO tutorial. In WebDriverIO also, you can write absolute XPath and relative XPath. Absolute XPath starts with / slash and relative starts with // slash. This is a very strong and frequently used selector/ locator for identifying elements through Selenium automation testing.

Following special characters are used while writing XPath.

. – Dot means selection starts from the current node
* – Star means select any node
/ – Single slash means starts with the root node and used for absolute XPath
// – Double slash means to search the node using relative XPath
[ ] – square bracket used for index and also used for searching XPath by passing attribute and it’s value
@ – used for identify for HTML attribute in XPath

Syntax for Absolute XPath:

1	`$(‘<starts with /body>’);`

Syntax for Relative XPath:

1	`$(‘<starts with .//>’);`

Example:

const assert = require("assert");
  
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.lambdatest.com/");
   });
  
   it("Xpath - Absolute Example", function() {
       $("/html/body/div[2]/section[1]/div/div/h1").getText();
   });
  
   it("Xpath - Relative Example", function() {
       $(".//h1[@class='big_title text_shadow_black']").getText();
   });
});

When you run the above script, you can find the console log. Observe that WebdriverIO converted into findElement method with “XPath”.

Output:

[0-0] 2019-12-25T17:54:37.674Z INFO webdriver: COMMAND findElement("xpath", "/html/body/div[2]/section[1]/div/div/h1")
[0-0] 2019-12-25T17:54:37.675Z INFO webdriver: [POST] http://127.0.0.1:4444/session/5f6efebb541063139a91dec5d13c32f6/element
2019-12-25T17:54:37.675Z INFO webdriver: DATA { using: 'xpath',
 value: '/html/body/div[2]/section[1]/div/div/h1' }
[0-0] 2019-12-25T17:54:37.688Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'bc244c90-ed18-4d94-9b7a-d026ba7d70d4' }
[0-0] 2019-12-25T17:54:37.694Z INFO webdriver: COMMAND getElementText("bc244c90-ed18-4d94-9b7a-d026ba7d70d4")
[0-0] 2019-12-25T17:54:37.694Z INFO webdriver: [GET] http://127.0.0.1:4444/session/5f6efebb541063139a91dec5d13c32f6/element/bc244c90-ed18-4d94-9b7a-d026ba7d70d4/text
[0-0] 2019-12-25T17:54:37.709Z INFO webdriver: RESULT Cross Browser Testing Cloud
[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: COMMAND findElement("xpath", ".//h1[@class='big_title text_shadow_black']")
[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: [POST] http://127.0.0.1:4444/session/5f6efebb541063139a91dec5d13c32f6/element
[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: DATA { using: 'xpath',
 value: './/h1[@class=\'big_title text_shadow_black\']' }

ID

Another crucial Selenium Locator of this WebdriverIO tutorial. The ID is an extremely powerful selector to find an element from DOM. This is always a unique element in the DOM. One more important thing is that, if you want to speed up your automation execution then this is a must use Locator for Selenium automation testing. The ID directly gets a search from DOM whereas XPath scan the documents based on a relative or absolute path which is a time-consuming method.

# sign used to find elements using ID.

Syntax:

1	`$(#<idname>);`

Example:

const assert = require("assert");
  
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.facebook.com/");
   });
   it("ID Example", function() {
       $("#email").setValue("123");
   });
});

Now, here you should observe this output log. When you run the above script, you can see ID selector internally converted into css selector and finding the element.

Output:

[0-0] 2019-12-25T18:29:26.359Z INFO webdriver: COMMAND findElement("css selector", "#email")
[0-0] 2019-12-25T18:29:26.360Z INFO webdriver: [POST] http://127.0.0.1:4444/session/52e465fa0b2d0dacaf976994dd1edc60/element
2019-12-25T18:29:26.360Z INFO webdriver: DATA { using: 'css selector', value: '#email' }

Now, we have covered the usual Selenium locators in WebdriverIO. Next, we look at the advanced Selenium Locators/ Selectors in this WebdriverIO tutorial.

Chain Selectors

Sometimes it gets difficult to find an element that has no ID, name and tables rows and cells, in such a case, this chain selector helps you to get your unique element. There is no specific symbol given for this but you just call $().$() until you find the desired element by period (.) sign.

Note: Chain Selector/Locator uses the parent-child concept. So the Next chain element should fall under the parent chain selector.

Syntax:

1	`$(selector).$(selector).$(selector)`

Example:

const assert = require("assert");
  
describe("Selector Example", function() {
    
   it("Open URL", function() {
       driver.url("https://www.facebook.com/");
   });
    
   it("Chain - Selector Example", function() {
       $("#login_form")
           .$(".//table[@role='presentation']")
           .$("#email")
           .setValue("123");
   });
});

When the script gets executed, each element starts finding element one by one until it reaches the final element. Firstly it uses findElement() and then calls findElementFromElement().

Output:

0-0] 2019-12-26T06:14:22.748Z INFO webdriver: COMMAND findElement("css selector", "#login_form")
[0-0] 2019-12-26T06:14:22.748Z INFO webdriver: [POST] http://127.0.0.1:4444/session/3f354aaa54fb0ffee1fdf547ad3d9b04/element
[0-0] 2019-12-26T06:14:22.748Z INFO webdriver: DATA { using: 'css selector', value: '#login_form' }
[0-0] 2019-12-26T06:14:22.760Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'f0736c61-735d-4cc8-82e1-1fd1e0f47b39' }
[0-0] 2019-12-26T06:14:22.766Z INFO webdriver: COMMAND findElementFromElement("f0736c61-735d-4cc8-82e1-1fd1e0f47b39", "xpath", ".//table[@role='presentation']")
[0-0] 2019-12-26T06:14:22.766Z INFO webdriver: [POST] http://127.0.0.1:4444/session/3f354aaa54fb0ffee1fdf547ad3d9b04/element/f0736c61-735d-4cc8-82e1-1fd1e0f47b39/element
[0-0] 2019-12-26T06:14:22.766Z INFO webdriver: DATA { using: 'xpath', value: './/table[@role=\'presentation\']' }
[0-0] 2019-12-26T06:14:22.778Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'ab53a7ad-fc8d-4081-810d-745b001fad02' }
[0-0] 2019-12-26T06:14:22.779Z INFO webdriver: COMMAND findElementFromElement("ab53a7ad-fc8d-4081-810d-745b001fad02", "css selector", "#email")
[0-0] 2019-12-26T06:14:22.780Z INFO webdriver: [POST] http://127.0.0.1:4444/session/3f354aaa54fb0ffee1fdf547ad3d9b04/element/ab53a7ad-fc8d-4081-810d-745b001fad02/element
[0-0] 2019-12-26T06:14:22.780Z INFO webdriver: DATA { using: 'css selector', value: '#email' }
[0-0] 2019-12-26T06:14:22.789Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': '090696e4-585f-442c-a39d-dfe98f4d5d78' }
[0-0] 2019-12-26T06:14:22.791Z INFO webdriver: COMMAND elementClear("090696e4-585f-442c-a39d-dfe98f4d5d78")
[0-0] 2019-12-26T06:14:22.791Z INFO webdriver: [POST] http://127.0.0.1:4444/session/3f354aaa54fb0ffee1fdf547ad3d9b04/element/090696e4-585f-442c-a39d-dfe98f4d5d78/clear
[0-0] 2019-12-26T06:14:22.817Z INFO webdriver: COMMAND elementSendKeys("090696e4-585f-442c-a39d-dfe98f4d5d78", "123")
[0-0] 2019-12-26T06:14:22.817Z INFO webdriver: [POST] http://127.0.0.1:4444/session/3f354aaa54fb0ffee1fdf547ad3d9b04/element/090696e4-585f-442c-a39d-dfe98f4d5d78/value
[0-0] 2019-12-26T06:14:22.817Z INFO webdriver: DATA { text: '123' }

JS Function

WebdriverIO supports JS selector/locator to find the elements using a JavaScript.

Syntax:

1	`$(function() {return` `<JS script>})`

Example:

const assert = require("assert");
  
describe("Selector Example", function() {
   it("Open URL", function() {
       driver.url("https://www.lambdatest.com/");
   });
  
   it("JS Function Example", function() {
       const elem = $("//*[@id='navbarSupportedContent']/ul/li[1]");
       console.log(
           elem
               .$(function() {
                   return this.nextSibling.nextSibling;
               })
               .getText()
       );
   });
});

Web Elements stored in the variable and then JS functions call with help if $(). It converted internally executeScript().

Output:

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

050

051

052

053

054

055

056

057

058

059

060

061

062

063

064

065

066

067

068

069

070

071

072

073

074

075

076

077

078

079

080

081

082

083

084

085

086

087

088

089

090

091

092

093

094

095

096

097

098

099

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

[0-0] 2019-12-25T18:49:26.477Z INFO webdriver: COMMAND executeScript(<fn>, <div class="tie-fluid-width-video-wrapper"><object>)
[0-0] 2019-12-25T18:49:26.477Z INFO webdriver: [POST] http://127.0.0.1:4444/session/7ad49103a958fbdf72f36aa974c04f39/execute/sync
[0-0] 2019-12-25T18:49:26.477Z INFO webdriver: DATA { script: 'return (function (elem) {\n    return (function () {\n\t\t\t\t\treturn this.nextSibling.nextSibling;\n\t\t\t\t}).call(elem);\n  }).apply(null, arguments)',
 args:
  [ { 'element-6066-11e4-a52e-4f735466cecf': 'b6cb6661-b048-418f-b1f8-58ed3f9836fe',
      ELEMENT: 'b6cb6661-b048-418f-b1f8-58ed3f9836fe' } ] }
<h2 class="wp-block-heading">React Selector</h2><p>React is another one of the advanced locators in WebdriverIO which has been provided to create custom react components for mobile apps. WebDriverIO has provided a feature that you can directly find an element using the react$() method.</p><p>react$$() method helps to find an array of WebDriverIO elements.</p><p><strong>Syntax:</strong></p><div><div id="highlighter_552549" class="syntaxhighlighter  java"><table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="java plain">react$(‘ReactComponent’);</code></div></div></td></tr></tbody></table></div></div><p><strong>Let’s understand by below React Native Example:</strong></p><pre class="brush:js">import React from 'react'
import ReactDOM from 'react-dom'
  
function RootComponent() {
   return (
       <div>
           RootComponent
       </div>
   )
}
function App() {
   return (<RootComponent />)
}
ReactDOM.render(<App />, document.querySelector('#root'))
</pre><p>In the above example, ‘<strong>RootComponent</strong>’ is a react component and when it renders within HTML element with id=’root’.</p><p>This RootComponent can be found by react$() and below is the example:</p><div><div id="highlighter_389847" class="syntaxhighlighter  java"><table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="java keyword">const</code> <code class="java plain">rootComponent = browser.react$(‘RootComponent’);</code></div></div></td></tr></tbody></table></div></div><h2 class="wp-block-heading">Custom Selector</h2><p>One of the most convenient Selenium locators/ selectors in WebdriverIO which comes handy when facing complex scenarios for Selenium automation testing. The Custom selector allows you to use a customized strategy declared by using browser.addLocatorStrategy.</p><p>custom$$() method helps to find an array of WebDriverIO elements.</p><p><strong>Syntax:</strong></p><div><div id="highlighter_972796" class="syntaxhighlighter  java"><table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="java plain">browser.custom$(strategyName, strategyArguments)</code></div></div></td></tr></tbody></table></div></div><p><strong>Example:</strong></p><pre class="brush:js">const assert = require("assert");
describe("Selector Example", function() {
   
   it("Open URL", function() {
       driver.url("https://www.facebook.com/");
   });
    
   it("Custom Selector Example - ", () => {
       browser.addLocatorStrategy("emailById", selector => {
           return document.querySelectorAll(selector);
       });
       const emailID = browser.custom$("emailById", "#email");
emailID.setValue("abc@test.com");
   });
});
</pre><p>With the help of addLocatorStrategy(), we have created ‘<strong>emailById</strong>’ custom selector for the email ID field and we can use <strong>emailById</strong> selector using the custom$() method. Internally, WebDriverIO converts custom$() into executeScript() and finds the element.</p><p><strong>Note:</strong> In this WebdriverIO tutorial, we have discussed single $() which helps to deal with a single element. All these selectors can be used with $$() for the array of WebDriverIO.</p><h2 class="wp-block-heading">Conclusion</h2><p>WebDriverIO is one of the top JavaScript testing frameworks and when you look at the variety it offers for you to locate elements in a web page, you would be sure to make a note of it for your upcoming projects. It has a very unique selector choice including react$ and custom$ selectors. WebDriverIO has single way to find the element but has different signs for selector e.g * , *=, .(period) and # different. I am sure that this WebdriverIO tutorial will help you to take your knowledge on test automation to the next step. Happy testing!</p><figure class="wp-block-image size-large is-resized"><a href="https://accounts.lambdatest.com/register/"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2OTgiIGhlaWdodD0iMTM1IiB2aWV3Qm94PSIwIDAgNjk4IDEzNSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" decoding="async" data-src="http://www.javacodegeeks.com/wp-content/uploads/2020/01/Adword-Cyber2.jpg.webp" alt="" class="wp-image-101468" width="698" height="135" data-srcset="https://www.javacodegeeks.com/wp-content/uploads/2020/01/Adword-Cyber2.jpg.webp 930w, https://www.javacodegeeks.com/wp-content/uploads/2020/01/Adword-Cyber2-300x58.jpg.webp 300w, https://www.javacodegeeks.com/wp-content/uploads/2020/01/Adword-Cyber2-768x149.jpg.webp 768w" data-sizes="(max-width: 698px) 100vw, 698px"><noscript><img decoding="async" src="http://www.javacodegeeks.com/wp-content/uploads/2020/01/Adword-Cyber2.jpg.webp" alt="" class="wp-image-101468" width="698" height="135" srcset="https://www.javacodegeeks.com/wp-content/uploads/2020/01/Adword-Cyber2.jpg.webp 930w, https://www.javacodegeeks.com/wp-content/uploads/2020/01/Adword-Cyber2-300x58.jpg.webp 300w, https://www.javacodegeeks.com/wp-content/uploads/2020/01/Adword-Cyber2-768x149.jpg.webp 768w" sizes="(max-width: 698px) 100vw, 698px" /></noscript></a></figure><div class="attribution"><table><tbody><tr><td><p>Published on Java Code Geeks with permission by Ramit Dhamija, partner at our <a href="//www.javacodegeeks.com/join-us/jcg/" target="_blank" rel="noopener noreferrer">JCG program</a>. See the original article here: <a href="https://www.lambdatest.com/blog/how-webdriverio-uses-selenium-locators/" target="_blank" rel="noopener noreferrer">How WebdriverIO Uses Selenium Locators in a Unique Way – A WebdriverIO Tutorial With Examples</a></p><p>Opinions expressed by Java Code Geeks contributors are their own.</p></td></tr></tbody></table></div><style>.lepopup-progress-60 div.lepopup-progress-t1>div{background-color:#e0e0e0;}.lepopup-progress-60 div.lepopup-progress-t1>div>div{background-color:#bd4070;}.lepopup-progress-60 div.lepopup-progress-t1>div>div{color:#ffffff;}.lepopup-progress-60 div.lepopup-progress-t1>label{color:#444444;}.lepopup-form-60, .lepopup-form-60 *, .lepopup-progress-60 {font-size:15px;color:#444444;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element div.lepopup-input div.lepopup-signature-box span i{font-family:'Arial','arial';font-size:13px;color:#555555;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element div.lepopup-input div.lepopup-signature-box,.lepopup-form-60 .lepopup-element div.lepopup-input div.lepopup-multiselect,.lepopup-form-60 .lepopup-element div.lepopup-input input[type='text'],.lepopup-form-60 .lepopup-element div.lepopup-input input[type='email'],.lepopup-form-60 .lepopup-element div.lepopup-input input[type='password'],.lepopup-form-60 .lepopup-element div.lepopup-input select,.lepopup-form-60 .lepopup-element div.lepopup-input select option,.lepopup-form-60 .lepopup-element div.lepopup-input textarea{font-family:'Arial','arial';font-size:13px;color:#555555;font-style:normal;text-decoration:none;text-align:left;background-color:rgba(255, 255, 255, 0.7);background-image:none;border-width:1px;border-style:solid;border-color:#cccccc;border-radius:0px;box-shadow: inset 0px 0px 15px -7px #000000;}.lepopup-form-60 .lepopup-element div.lepopup-input ::placeholder{color:#555555; opacity: 0.9;} .lepopup-form-60 .lepopup-element div.lepopup-input ::-ms-input-placeholder{color:#555555; opacity: 0.9;}.lepopup-form-60 .lepopup-element div.lepopup-input div.lepopup-multiselect::-webkit-scrollbar-thumb{background-color:#cccccc;}.lepopup-form-60 .lepopup-element div.lepopup-input>i.lepopup-icon-left, .lepopup-form-60 .lepopup-element div.lepopup-input>i.lepopup-icon-right{font-size:20px;color:#444444;border-radius:0px;}.lepopup-form-60 .lepopup-element .lepopup-button,.lepopup-form-60 .lepopup-element .lepopup-button:visited{font-family:'Arial','arial';font-size:13px;color:#ffffff;font-weight:700;font-style:normal;text-decoration:none;text-align:center;background-color:#326693;background-image:none;border-width:1px;border-style:solid;border-color:#326693;border-radius:0px;box-shadow:none;}.lepopup-form-60 .lepopup-element div.lepopup-input .lepopup-imageselect+label{border-width:1px;border-style:solid;border-color:#cccccc;border-radius:0px;box-shadow:none;}.lepopup-form-60 .lepopup-element div.lepopup-input .lepopup-imageselect+label span.lepopup-imageselect-label{font-size:15px;color:#444444;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-tgl:checked+label:after{background-color:rgba(255, 255, 255, 0.7);}.lepopup-form-60 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-classic+label,.lepopup-form-60 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-fa-check+label,.lepopup-form-60 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-square+label,.lepopup-form-60 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-tgl+label{background-color:rgba(255, 255, 255, 0.7);border-color:#cccccc;color:#555555;}.lepopup-form-60 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-square:checked+label:after{background-color:#555555;}.lepopup-form-60 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-tgl:checked+label,.lepopup-form-60 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-tgl+label:after{background-color:#555555;}.lepopup-form-60 .lepopup-element div.lepopup-input input[type='radio'].lepopup-radio-classic+label,.lepopup-form-60 .lepopup-element div.lepopup-input input[type='radio'].lepopup-radio-fa-check+label,.lepopup-form-60 .lepopup-element div.lepopup-input input[type='radio'].lepopup-radio-dot+label{background-color:rgba(255, 255, 255, 0.7);border-color:#cccccc;color:#555555;}.lepopup-form-60 .lepopup-element div.lepopup-input input[type='radio'].lepopup-radio-dot:checked+label:after{background-color:#555555;}.lepopup-form-60 .lepopup-element div.lepopup-input div.lepopup-multiselect>input[type='checkbox']+label:hover{background-color:#bd4070;color:#ffffff;}.lepopup-form-60 .lepopup-element div.lepopup-input div.lepopup-multiselect>input[type='checkbox']:checked+label{background-color:#a93a65;color:#ffffff;}.lepopup-form-60 .lepopup-element input[type='checkbox'].lepopup-tile+label, .lepopup-form-60 .lepopup-element input[type='radio'].lepopup-tile+label {font-size:15px;color:#444444;font-style:normal;text-decoration:none;text-align:center;background-color:#ffffff;background-image:none;border-width:1px;border-style:solid;border-color:#cccccc;border-radius:0px;box-shadow:none;}.lepopup-form-60 .lepopup-element-error{font-size:15px;color:#ffffff;font-style:normal;text-decoration:none;text-align:left;background-color:#d9534f;background-image:none;}.lepopup-form-60 .lepopup-element-2 {background-color:rgba(226, 236, 250, 1);background-image:none;border-width:1px;border-style:solid;border-color:rgba(216, 216, 216, 1);border-radius:3px;box-shadow: 1px 1px 15px -6px #d7e1eb;}.lepopup-form-60 .lepopup-element-3 * {font-family:'Arial','arial';font-size:26px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-3 {font-family:'Arial','arial';font-size:26px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-3 .lepopup-element-html-content {min-height:73px;}.lepopup-form-60 .lepopup-element-4 * {font-family:'Arial','arial';font-size:19px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-4 {font-family:'Arial','arial';font-size:19px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-4 .lepopup-element-html-content {min-height:23px;}.lepopup-form-60 .lepopup-element-5 * {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-5 {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-5 .lepopup-element-html-content {min-height:24px;}.lepopup-form-60 .lepopup-element-6 * {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-6 {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-6 .lepopup-element-html-content {min-height:18px;}.lepopup-form-60 .lepopup-element-7 * {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-7 {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-7 .lepopup-element-html-content {min-height:18px;}.lepopup-form-60 .lepopup-element-8 * {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-8 {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-8 .lepopup-element-html-content {min-height:18px;}.lepopup-form-60 .lepopup-element-9 * {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-9 {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-9 .lepopup-element-html-content {min-height:18px;}.lepopup-form-60 .lepopup-element-10 * {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-10 {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-10 .lepopup-element-html-content {min-height:18px;}.lepopup-form-60 .lepopup-element-11 * {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-11 {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-11 .lepopup-element-html-content {min-height:18px;}.lepopup-form-60 .lepopup-element-12 * {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-12 {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-12 .lepopup-element-html-content {min-height:18px;}.lepopup-form-60 .lepopup-element-13 * {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-13 {font-family:'Arial','arial';font-size:15px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-13 .lepopup-element-html-content {min-height:18px;}.lepopup-form-60 .lepopup-element-14 div.lepopup-input .lepopup-icon-left, .lepopup-form-60 .lepopup-element-14 div.lepopup-input .lepopup-icon-right {line-height:36px;}.lepopup-form-60 .lepopup-element-15 div.lepopup-input{height:auto;line-height:1;}.lepopup-form-60 .lepopup-element-16 * {font-family:'Arial','arial';font-size:14px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-16 {font-family:'Arial','arial';font-size:14px;color:#333333;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-16 .lepopup-element-html-content {min-height:5px;}.lepopup-form-60 .lepopup-element-19 * {font-family:'Arial','arial';font-size:13px;color:#333333;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-19 {font-family:'Arial','arial';font-size:13px;color:#333333;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-60 .lepopup-element-19 .lepopup-element-html-content {min-height:363px;}.lepopup-form-60 .lepopup-element-0 * {font-size:15px;color:#ffffff;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-60 .lepopup-element-0 {font-size:15px;color:#ffffff;font-weight:normal;font-style:normal;text-decoration:none;text-align:left;background-color:#5cb85c;background-image:none;border-width:0px;border-style:solid;border-color:#ccc;border-radius:5px;box-shadow: 1px 1px 15px -6px #000000;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;}.lepopup-form-60 .lepopup-element-0 .lepopup-element-html-content {min-height:160px;}</style><div class="lepopup-inline" style="margin: 0 auto;"><div class="lepopup-form lepopup-form-60 lepopup-form-uE2nj57EPA7oQLwz lepopup-form-icon-inside lepopup-form-position-middle-right" data-session="0" data-id="uE2nj57EPA7oQLwz" data-form-id="60" data-slug="7lQM6oyWL5bTm5lw" data-title="Under the Post Inline" data-page="1" data-xd="off" data-width="820" data-height="430" data-position="middle-right" data-esc="off" data-enter="on" data-disable-scrollbar="off" style="display:none;width:820px;height:430px;" onclick="event.stopPropagation();"><div class="lepopup-form-inner" style="width:820px;height:430px;"><div class="lepopup-element lepopup-element-2 lepopup-element-rectangle" data-type="rectangle" data-top="0" data-left="0" data-animation-in="fadeIn" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:501;top:0px;left:0px;width:820px;height:430px;"></div><div class="lepopup-element lepopup-element-3 lepopup-element-html" data-type="html" data-top="7" data-left="10" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:502;top:7px;left:10px;width:797px;height:73px;"><div class="lepopup-element-html-content">Do you want to know how to develop your skillset to become a <span style="color: #CAB43D; text-shadow: 1px 1px #835D5D;">Java Rockstar?</span></div></div><div class="lepopup-element lepopup-element-4 lepopup-element-html" data-type="html" data-top="83" data-left="308" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:503;top:83px;left:308px;width:473px;height:23px;"><div class="lepopup-element-html-content">Subscribe to our newsletter to start Rocking <span style="text-decoration: underline;">right now!</span></div></div><div class="lepopup-element lepopup-element-5 lepopup-element-html" data-type="html" data-top="107" data-left="308" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:504;top:107px;left:308px;width:473px;height:24px;"><div class="lepopup-element-html-content">To get you started we give you our best selling eBooks for <span style="color:#e01404; text-shadow: 1px 1px #C99924; font-size: 15px;">FREE!</span></div></div><div class="lepopup-element lepopup-element-6 lepopup-element-html" data-type="html" data-top="136" data-left="308" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:505;top:136px;left:308px;width:473px;height:18px;"><div class="lepopup-element-html-content"><span style="font-weight: bold;">1.</span> JPA Mini Book</div></div><div class="lepopup-element lepopup-element-7 lepopup-element-html" data-type="html" data-top="156" data-left="308" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:506;top:156px;left:308px;width:473px;height:18px;"><div class="lepopup-element-html-content"><span style="font-weight: bold;">2.</span> JVM Troubleshooting Guide</div></div><div class="lepopup-element lepopup-element-8 lepopup-element-html" data-type="html" data-top="176" data-left="308" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:507;top:176px;left:308px;width:473px;height:18px;"><div class="lepopup-element-html-content"><span style="font-weight: bold;">3.</span> JUnit Tutorial for Unit Testing</div></div><div class="lepopup-element lepopup-element-9 lepopup-element-html" data-type="html" data-top="196" data-left="308" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:508;top:196px;left:308px;width:473px;height:18px;"><div class="lepopup-element-html-content"><span style="font-weight: bold;">4.</span> Java Annotations Tutorial</div></div><div class="lepopup-element lepopup-element-10 lepopup-element-html" data-type="html" data-top="216" data-left="308" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:509;top:216px;left:308px;width:473px;height:18px;"><div class="lepopup-element-html-content"><span style="font-weight: bold;">5.</span> Java Interview Questions</div></div><div class="lepopup-element lepopup-element-11 lepopup-element-html" data-type="html" data-top="236" data-left="308" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:510;top:236px;left:308px;width:473px;height:18px;"><div class="lepopup-element-html-content"><span style="font-weight: bold;">6.</span> Spring Interview Questions</div></div><div class="lepopup-element lepopup-element-12 lepopup-element-html" data-type="html" data-top="256" data-left="308" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:511;top:256px;left:308px;width:473px;height:18px;"><div class="lepopup-element-html-content"><span style="font-weight: bold;">7.</span> Android UI Design</div></div><div class="lepopup-element lepopup-element-13 lepopup-element-html" data-type="html" data-top="282" data-left="308" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:512;top:282px;left:308px;width:473px;height:18px;"><div class="lepopup-element-html-content">and many more ....</div></div><div class="lepopup-element lepopup-element-14" data-type="email" data-deps="" data-id="14" data-top="305" data-left="308" data-animation-in="fadeIn" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:513;top:305px;left:308px;width:473px;height:36px;"><div class="lepopup-input"><input type="email" name="lepopup-14" class="lepopup-ta-left " placeholder="Enter your e-mail..." autocomplete="email" data-default="" value="" aria-label="Email Field" oninput="lepopup_input_changed(this);" onfocus="lepopup_input_error_hide(this);"></div></div><div class="lepopup-element lepopup-element-15" data-type="checkbox" data-deps="" data-id="15" data-top="344" data-left="308" data-animation-in="fadeIn" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:514;top:344px;left:308px;width:160px;"><div class="lepopup-input lepopup-cr-layout-1 lepopup-cr-layout-left"><div class="lepopup-cr-container lepopup-cr-container-medium lepopup-cr-container-left"><div class="lepopup-cr-box"><input class="lepopup-checkbox lepopup-checkbox-classic lepopup-checkbox-medium" type="checkbox" name="lepopup-15[]" id="lepopup-checkbox-nxSpdQ97ipWLuzMh-14-0" value="on" data-default="off" onchange="lepopup_input_changed(this);"><label for="lepopup-checkbox-nxSpdQ97ipWLuzMh-14-0" onclick="lepopup_input_error_hide(this);"></label></div><div class="lepopup-cr-label lepopup-ta-left"><label for="lepopup-checkbox-nxSpdQ97ipWLuzMh-14-0" onclick="lepopup_input_error_hide(this);"></label></div></div></div></div><div class="lepopup-element lepopup-element-16 lepopup-element-html" data-type="html" data-top="344" data-left="338" data-animation-in="fadeIn" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:515;top:344px;left:338px;width:350px;height:5px;"><div class="lepopup-element-html-content">I agree to the <a href="https://www.javacodegeeks.com/about/terms-of-use" target="_blank">Terms </a> and <a href="https://www.javacodegeeks.com/about/privacy-policy" target="_blank">Privacy Policy</a></div></div><div class="lepopup-element lepopup-element-17" data-type="button" data-top="372" data-left="308" data-animation-in="bounceIn" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:516;top:372px;left:308px;width:85px;height:37px;"><a class="lepopup-button lepopup-button-zoom-out " href="#" onclick="return lepopup_submit(this);" data-label="Sign up" data-loading="Loading..."><span>Sign up</span></a></div><div class="lepopup-element lepopup-element-19 lepopup-element-html" data-type="html" data-top="67" data-left="-15" data-animation-in="fadeIn" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:518;top:67px;left:-15px;width:320px;height:363px;"><div class="lepopup-element-html-content"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMjAiIGhlaWdodD0iMzYzIiB2aWV3Qm94PSIwIDAgMzIwIDM2MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" decoding="async" data-src="https://www.javacodegeeks.com/wp-content/uploads/2015/01/books_promo.png.webp" alt="" width="320" height="363"><noscript><img decoding="async" src="https://www.javacodegeeks.com/wp-content/uploads/2015/01/books_promo.png.webp" alt="" width="320" height="363"/></noscript></div></div></div></div><div class="lepopup-form lepopup-form-60 lepopup-form-uE2nj57EPA7oQLwz lepopup-form-icon-inside lepopup-form-position-middle-right" data-session="0" data-id="uE2nj57EPA7oQLwz" data-form-id="60" data-slug="7lQM6oyWL5bTm5lw" data-title="Under the Post Inline" data-page="confirmation" data-xd="off" data-width="420" data-height="320" data-position="middle-right" data-esc="off" data-enter="on" data-disable-scrollbar="off" style="display:none;width:420px;height:320px;" onclick="event.stopPropagation();"><div class="lepopup-form-inner" style="width:420px;height:320px;"><div class="lepopup-element lepopup-element-0 lepopup-element-html" data-type="html" data-top="80" data-left="70" data-animation-in="bounceInDown" data-animation-out="fadeOutUp" style="animation-duration:1000ms;animation-delay:0ms;z-index:500;top:80px;left:70px;width:280px;height:160px;"><div class="lepopup-element-html-content"><h4 style="text-align: center; font-size: 18px; font-weight: bold;">Thank you!</h4><p style="text-align: center;">We will contact you soon.</p></div></div></div></div><input type="hidden" id="lepopup-logic-uE2nj57EPA7oQLwz" value="[]"></div><div class="post-bottom-meta post-bottom-tags post-tags-classic"><div class="post-bottom-meta-title"><span class="tie-icon-tags" aria-hidden="true"></span> Tags</div><span class="tagcloud"><a href="https://www.javacodegeeks.com/tag/framework" rel="tag">framework</a> <a href="https://www.javacodegeeks.com/tag/selenium" rel="tag">Selenium</a> <a href="https://www.javacodegeeks.com/tag/webdriverio" rel="tag">WebdriverIO</a></span></div><div id="post-extra-info"><div class="theiaStickySidebar"><div class="single-post-meta post-meta clearfix"><span class="author-meta single-author with-avatars"><span class="meta-item meta-author-wrapper meta-author-91768">
<span class="meta-author-avatar">
<a href="https://www.javacodegeeks.com/author/ramit-dhamija"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIiB2aWV3Qm94PSIwIDAgMTQwIDE0MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" alt="Photo of Ramit Dhamija" data-src="https://secure.gravatar.com/avatar/e80e6fe5e5a8515322f5ebf571f8f91c?s=140&d=mm&r=g" data-srcset="https://secure.gravatar.com/avatar/e80e6fe5e5a8515322f5ebf571f8f91c?s=280&d=mm&r=g 2x" class="avatar avatar-140 photo" height="140" width="140" decoding="async"><noscript><img alt='Photo of Ramit Dhamija' src='https://secure.gravatar.com/avatar/e80e6fe5e5a8515322f5ebf571f8f91c?s=140&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/e80e6fe5e5a8515322f5ebf571f8f91c?s=280&d=mm&r=g 2x' class='avatar avatar-140 photo' height='140' width='140' decoding='async'/></noscript></a>
</span>
<span class="meta-author"><a href="https://www.javacodegeeks.com/author/ramit-dhamija" class="author-name tie-icon" title="Ramit Dhamija">Ramit Dhamija</a></span></span></span><span class="date meta-item tie-icon">February 7th, 2020</span><span class="meta-item last-updated">Last Updated: January 29th, 2020</span><div class="tie-alignright"><span class="meta-comment tie-icon meta-item fa-before">0</span><span class="meta-views meta-item "><span class="tie-icon-fire" aria-hidden="true"></span> 380 </span><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> 13 minutes read</span></div></div></div></div><div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2020-02-07T07:00:53+02:00","datePublished":"2020-02-07T07:00:53+02:00","dateModified":"2020-01-29T15:47:28+02:00","headline":"How WebdriverIO Uses Selenium Locators in a Unique Way \u2013 A WebdriverIO Tutorial With Examples","name":"How WebdriverIO Uses Selenium Locators in a Unique Way \u2013 A WebdriverIO Tutorial With Examples","keywords":"framework,Selenium,WebdriverIO","url":"https:\/\/www.javacodegeeks.com\/2020\/02\/how-webdriverio-uses-selenium-locators-in-a-unique-way-a-webdriverio-tutorial-with-examples.html","description":"In any automation testing framework, finding elements is the most fundamental activity. We have to choose web elements very carefully so that automation script execution can handle static and dynamic","copyrightYear":"2020","articleSection":"JavaScript","articleBody":"\nIn any automation testing framework, finding elements is the most fundamental activity. We have to choose web elements very carefully so that automation script execution can handle static and dynamic elements for stable test results. WebDriverIO has many advanced Selenium locators\/ selector strategies compared to other automation testing frameworks. Traditionally, each locator has a specific By method which identifies the locators during runtime. However, WebdriverIO has simplified these By methods and now we do not have to specify them explicitly. WebdriverIO has the intelligence to identify which locator has been passed. By the end of this WebdriverIO tutorial, you will learn how WebDriverIO is transforming the way of Selenium locator strategy and how easy to remember and write it.\n\n\n\nNote: If you refer to the official documentation of the WebdriverIO framework, you will notice that they have referred to Locators as Selectors. You need not get confused if you are familiar with some other test automation framework in Selenium. For example, if you have worked with Selenium Locators in Java, then those locators in WebdriverIO are addressed as Selectors.\n\n\n\nFor the ease of understanding, I will refer to them as Selenium locators in this WebdriverIO tutorial. As it is a more standardized and familiar term around automation testing with Selenium.\n\n\n\nWhat are Selenium Locators In WebdriverIO?\n\n\n\nBefore we start off this WebdriverIO tutorial for Selenium locators\/selectors, let us quickly understand what they are used for. Selenium locators are utilized to find elements on a web page through a Selenium WebDriver when a test automation script is executed. The Selector is a command in Selenium. Selenium library reads this command from the script, convert into an HTTP request and interact with Web browsers lastly, perform actions based on the command.\n\n\n\nRead More: WebdriverIO Tutorial With Examples For Selenium Testing\n\n\n\nSelenium Locator Strategies\n\n\n\nWhen you get hands-on Selenium automation testing using WebdriverIO, you should be aware of the correct strategy that works for locating unique elements on a web page. Finding elements by ID, Name and relative XPath would be the first choice to find a unique element from the website. If you could not find any of these ways then it is advisable to choose other types of the Selenium locators\/ selector.\n\n\n\nIf you have performed Selenium automation testing with Java, you may have used findElement() and findElements() method to find the selector from DOM. However, WebdriverIO offers a unique way of Selenium testing with WebDriverIO. With WebdriverIO, you don\u2019t have to mention the Selenium locator\u2019s strategy as it will automatically understand which types of locator strategy should be used. We will look into each Selenium Locator in this WebdriverIO tutorial. Before we jump into practical demonstration, make sure to note down the below methods for finding elements in WebDriverIO:\n\n\n\n$(): Single dollar sign used to find single web element$$(): Double dollar sign used to find multiple web elements\n\n\n\nApart from these two methods, WebDriverIO Support other methods which are,\n\n\n\ncustom$(): used to find a custom strategy for a single web elementcustom$(): used to find a custom strategy for multiples web elements\n\n\n\nreact$(): used to find single React component by their given name and it gets filter by props and statereact$$(): used to find multiples React components by their given name and it gets filter by props and state\n\n\n\nNote: react$ and react$$ command only works with applications using React v16.x\n\n\n\nHow To Find A Web Element In Browser?\n\n\n\nTo find a web element in the browser, User has to go to the browser\u2019s developer tools by pressing F12 in windows and option+command+i in Mac Operating System or right-clicking on a website and select inspect option.\n\n\n\n\n\n\n\nBrowser Developer Tools \n\n\n\nWhen you open the developer tool, you can see HTML tags under the \u201cElements\u201d tab. This HTML tab calls DOM elements. To find particular Web Elements, select the selector icon( before the Elements tab) and hover over the element you wish to find in the DOM.\n\n\n\n\n\n\n\nTop 16 Tips To Use Chrome Dev Tools For Cross Browser Testing\n\n\n\nList Of Selenium Locators In WebDriverIO\n\n\n\nNow that you have a good understanding of Selenium Locators, let us see the different types of Selenium Locators in this WebdriverIO tutorial. The following are the supported selectors by the WebdriverIO.\n\n\n\nCSS Query SelectorLink TextPartial Link TextElement with certain textTag NameNamexPathIDJS FunctionChain SelectorsReact SelectorsCustom Selector\n\n\n\nUsing $, $$, Custom$, Custom$$, react$ and react$$ methods the user can find the elements and perform desired operations. Let\u2019s deep dive at each one of these Selenium Locators in this WebdriverIO tutorial for Selenium automation testing with examples of a sample DOM.\n\n\n\nCSS Query Selector\n\n\n\nThe first locator in this WebdriverIO tutorial for Selenium automation testing is the CSS Query selector, which is used to find the element from DOM.\n\n\n\nHow can you find CSS Query?\n\n\n\nGo to developer tools and find the element and right click on Selected element in the DOM and copy CSS selector option.\n\n\n\n\n\n\n\nSyntax: $(\u2018CSS Query\u2019); \n\n\n\nExample:\n\n\n\n\nconst assert = require(\"assert\");\n \ndescribe(\"Selector Example\", function() {\n   it(\"CSS Query Selector\", function() {\n       driver.url(\"https:\/\/lambdatest.github.io\/sample-todo-app\/\");\n       $(\"body > div.ng-scope > div > div > ul\").click();     \n   });\n});\n\n\n\n\nOutput:\n\n\n\nWhen you run the above script, you can find the console log and observed that WebdriverIO converted into findElement method with CSS selector strategy\n\n\n\n\n[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: COMMAND findElement(\"css selector\", \"body > div.ng-scope > div > div > ul\")\n[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/839505649081eaf3bef60a252593f2f9\/element\n[0-0] 2019-12-24T10:34:19.689Z INFO webdriver: DATA { using: 'css selector',\n value: 'body > div.ng-scope > div > div > ul' }\n\n\n\n\nRemember, Sometimes using CSS query selector could result in locating multiple elements as a CSS sheet used for the whole website. Now, let us head to the next Selenium locator in this WebdriverIO tutorial.\n\n\n\nLink Text\n\n\n\nA website is made up of different types of components e.g textbox, links, drop-down, etc. Even a single web page can have numerous links over it. Selecting a particular link for your Selenium automation testing script could become challenging. This is where Link Text as a Selenium Locators for WebdriverIO comes into play. If you want to find any hyperlink then use this link text selector strategy.\n\n\n\nSyntax: $(\u2018=anchorText\u2019);\n\n\n\nHere, = equal to sign is used to find anchor element with \u2018specific text\u2019.\n\n\n\nExample:\n\n\n\n\nconst assert = require(\"assert\");\ndescribe(\"Selector Example\", function() {\n   it(\"Open URL\", function() { \n       driver.url(\"https:\/\/www.lambdatest.com\/\");     \n   });\n   it(\"Link Text Example\", function() {\n       $(\"=Automation\").click();\n   });\n});\n\n\n\n\nWhen you run the above automation testing script, you can find the console log. If you notice the logs you will observe that WebdriverIO has automatically detected the findElement method with link text strategy.\n\n\n\nOutput:\n\n\n\n\n0-0] 2019-12-24T10:58:56.640Z INFO webdriver: COMMAND findElement(\"link text\", \"Automation\")\n[0-0] 2019-12-24T10:58:56.640Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/0a34df231b0b77c5e0e4d687a14829a2\/element\n[0-0] 2019-12-24T10:58:56.640Z INFO webdriver: DATA { using: 'link text', value: 'Automation' }\n\n\n\n\nBe careful about the elements being selected by this Selenium Locator in WebdriverIO as it might lead to multiple anchors with the same link text. Now that we know of Link text, let us now head to the Partial link text locator in this WebdriverIO tutorial.\n\n\n\nPartial Link Text\n\n\n\nPartial link text is similar to link text but the only difference is that this helps when the starting few characters of a link are fixed and the rest are dynamic.\n\n\n\nSyntax: $(\u2018=anchorMatchedText\u2019);\n\n\n\n*= start equal to sign is used to find an anchor element with the matched text\u2019.\n\n\n\n\n\n\n\n\n\n1\n\n\n\n$(\"=Automa\")\n\n\n\n\n\n\n\n\n\n\nExample:\n\n\n\n\nconst assert = require(\"assert\");\ndescribe(\"Selector Example\", function() {\n   it(\"Open URL\", function() {\n       driver.url(\"https:\/\/www.lambdatest.com\/\");\n   });\n   it(\"Partial Link Text Example\", function() {\n       $(\"*=Automa\").click();\n   });\n});\n\n\n\n\nWhen you run the above script, you can find the console log and observe that WebdriverIO converted into findElement method with partial link text strategy.\n\n\n\nOutput:\n\n\n\n\n$(\u2018elementTag=certain text\u2019); used for fixed text\n$(\u2018elementTag*=partial text\u2019); used for partial text\n\n\n\n\nElement With Certain Text\n\n\n\nIn HTML every tag is known as an element and few elements have the direct text and few elements wrapped around other tags. If you want to find the element which has a certain or partial text then this selector is preferred to use.\n\n\n\nWhile Selenium automation testing using Java, you would use XPath with normalize-space() method to find text along with HTML tag if you want to find HTML tag with some text but WebdriverIO uses the method below.\n\n\n\nSyntax:\n\n\n\n\n\n\n\n\n\n1\n2\n\n\n\n$(\u2018elementTag=certain text\u2019); used for fixed text\n$(\u2018elementTag*=partial text\u2019); used for partial text\n\n\n\n\n\n\n\n\n\n\nThis selector takes help from = (equal to) and *= (start equal to) sign.\n\n\n\n\n\n\n\nFor instance, to find Cross Browser Testing Cloud from below H1 tag, using this command $(\u201ch1=Cross Browser Testing Cloud\u201d)\n\n\n\n< h1 class=\"big_title text_shadow_black __web-inspector-hide-shortcut__\">Cross Browser Testing Cloud< \/h1>\n\n\n\nThe same thing will work for class and ID attribute of the elements. For example:\n\n\n\n$(\u2018#id=certain text\u2019); used for fixed text$(\u2018#id*=certain text\u2019); used for partial text$(\u2018.classname=certain text\u2019); used for fixed text$(\u2018.classname*=partial text\u2019); used for partial text\n\n\n\nHere, # is used when you want to find elements by ID and . (dot) used for the class name.\n\n\n\nExample:\n\n\n\n\nconst assert = require(\"assert\");\n \ndescribe(\"Selector Example\", function() {\n   it(\"Open URL\", function() {\n       driver.url(\"https:\/\/www.lambdatest.com\/\");\n   });\n   it(\"Element with certain text Example\", function() {\n       $(\"h1=Cross Browser Testing Cloud\").click();\n   });\n   it(\"Element with Partial text Example\", function() {\n       $(\"h1*=Cross Browser Testing\").click();\n   });\n});\n\n\n\n\nWhen you run the above script, you can find the console log and observe that WebdriverIO converted into findElement method with \u201cnormalize-space()\u201d and \u201ccontains()\u201d.\n\n\n\nOutput:\n\n\n\n\n[0-0] 2019-12-24T11:39:33.082Z INFO webdriver: COMMAND findElement(\"xpath\", \".\/\/h1[normalize-space() = \"Cross Browser Testing Cloud\"]\")\n[0-0] 2019-12-24T11:39:33.082Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/423097da27eadf53b1fac0f11655e9be\/element\n[0-0] 2019-12-24T11:39:33.083Z INFO webdriver: DATA { using: 'xpath',\n value: '.\/\/h1[normalize-space() = \"Cross Browser Testing Cloud\"]' }\n[0-0] 2019-12-24T11:39:33.099Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': '03328283-f372-423c-8218-48759ac98631' }\n[0-0] 2019-12-24T11:39:33.104Z INFO webdriver: COMMAND elementClick(\"03328283-f372-423c-8218-48759ac98631\")\n[0-0] 2019-12-24T11:39:33.105Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/423097da27eadf53b1fac0f11655e9be\/element\/03328283-f372-423c-8218-48759ac98631\/click\n[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: COMMAND findElement(\"xpath\", \".\/\/h1[contains(., \"Cross Browser Testing\")]\")\n[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/423097da27eadf53b1fac0f11655e9be\/element\n[0-0] 2019-12-24T11:39:33.151Z INFO webdriver: DATA { using: 'xpath',\n value: '.\/\/h1[contains(., \"Cross Browser Testing\")]' }\n\n\n\n\nNow, let us have a look at the Tag Name locator in this WebdriverIO tutorial for Selenium automation testing.\n\n\n\nTag Name\n\n\n\nWe use the tag name selector to find the element using any HTML tag. This is a very rarely used Selenium locator. However, this is very important if you are dealing with tables or calendar elements. While Selenium automation testing, you can pass the Tag Name as either of < tag > or < tag \/>.\n\n\n\nSyntax:\n\n\n\n\n\n\n\n\n\n1\n2\n\n\n\n$(\u2018<tag>\u2019);\n$(\u2018<tag \/>\u2019);\n\n\n\n\n\n\n\n\n\n\nExample:\n\n\n\n\nconst assert = require(\"assert\");\ndescribe(\"Selector Example\", function() {\n   it(\"Open URL\", function() {\n       driver.url(\"https:\/\/www.lambdatest.com\/\");\n   });\n   it(\"Tag Name Example\", function() {\n       $(\"<h1>\").getText();\n   });\n});\n\n\n\n\nHere is the output when the above Selenium automation testing script is executed in WebdriverIO.\n\n\n\nOutput:\n\n\n\n\n[0-0] 2019-12-26T10:07:37.804Z INFO webdriver: COMMAND findElement(\"tag name\", \"h1\")\n[0-0] 2019-12-26T10:07:37.804Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/d67eadf284b85ecd1e641855c194937b\/element\n2019-12-26T10:07:37.804Z INFO webdriver: DATA { using: 'tag name', value: 'h1' }\n\n\n\n\nName\n\n\n\nThis Selenium locator is similar to the ID Locator in Selenium. Sometimes a web developer gives a name to the HTML node. If a node has a name attribute then it is preferred to incorporate the Name locator in Selenium automation testing. The name selector has to be within square brackets with the name attribute.\n\n\n\nSyntax:\n\n\n\n\n\n\n\n\n\n1\n\n\n\n$(\u2018[<name attribute>]\u2019)\n\n\n\n\n\n\n\n\n\n\nExample:\n\n\n\n\n\nconst assert = require(\"assert\");\n \ndescribe(\"Selector Example\", function() {\n   it(\"Open URL\", function() {\n       driver.url(\"https:\/\/www.facebook.com\/\");\n   });\n   it(\"Name Example\", function() {\n       $(\"[name = 'email']\").setValue(\"123\");\n   });\n \n});\n\n\n\n\n Output: \n\n\n\n\n[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: COMMAND findElement(\"css selector\", \"[name = 'email']\")\n[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/aee87e328f63eb11678a49adce17df4b\/element\n[0-0] 2019-12-26T10:15:08.208Z INFO webdriver: DATA { using: 'css selector', value: '[name = \\'email\\']' }\n\n\n\n\nXPath\n\n\n\nAn extremely pivotal Selenium locator of this WebdriverIO tutorial. In WebDriverIO also, you can write absolute XPath and relative XPath. Absolute XPath starts with \/ slash and relative starts with \/\/ slash. This is a very strong and frequently used selector\/ locator for identifying elements through Selenium automation testing.\n\n\n\nFollowing special characters are used while writing XPath.\n\n\n\n. \u2013 Dot means selection starts from the current node* \u2013 Star means select any node\/ \u2013 Single slash means starts with the root node and used for absolute XPath\/\/ \u2013 Double slash means to search the node using relative XPath[ ] \u2013 square bracket used for index and also used for searching XPath by passing attribute and it\u2019s value@ \u2013 used for identify for HTML attribute in XPath\n\n\n\nSyntax for Absolute XPath:\n\n\n\n\n\n\n\n\n\n1\n\n\n\n$(\u2018<starts with \/body>\u2019);\n\n\n\n\n\n\n\n\n\n\nSyntax for Relative XPath:\n\n\n\n\n\n\n\n\n\n1\n\n\n\n$(\u2018<starts with .\/\/>\u2019);\n\n\n\n\n\n\n\n\n\n\nExample:\n\n\n\n\nconst assert = require(\"assert\");\n \ndescribe(\"Selector Example\", function() {\n   it(\"Open URL\", function() {\n       driver.url(\"https:\/\/www.lambdatest.com\/\");\n   });\n \n   it(\"Xpath - Absolute Example\", function() {\n       $(\"\/html\/body\/div[2]\/section[1]\/div\/div\/h1\").getText();\n   });\n \n   it(\"Xpath - Relative Example\", function() {\n       $(\".\/\/h1[@class='big_title text_shadow_black']\").getText();\n   });\n});\n\n\n\n\nWhen you run the above script, you can find the console log. Observe that WebdriverIO converted into findElement method with \u201cXPath\u201d.\n\n\n\nOutput:\n\n\n\n\n[0-0] 2019-12-25T17:54:37.674Z INFO webdriver: COMMAND findElement(\"xpath\", \"\/html\/body\/div[2]\/section[1]\/div\/div\/h1\")\n[0-0] 2019-12-25T17:54:37.675Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/5f6efebb541063139a91dec5d13c32f6\/element\n2019-12-25T17:54:37.675Z INFO webdriver: DATA { using: 'xpath',\n value: '\/html\/body\/div[2]\/section[1]\/div\/div\/h1' }\n[0-0] 2019-12-25T17:54:37.688Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'bc244c90-ed18-4d94-9b7a-d026ba7d70d4' }\n[0-0] 2019-12-25T17:54:37.694Z INFO webdriver: COMMAND getElementText(\"bc244c90-ed18-4d94-9b7a-d026ba7d70d4\")\n[0-0] 2019-12-25T17:54:37.694Z INFO webdriver: [GET] http:\/\/127.0.0.1:4444\/session\/5f6efebb541063139a91dec5d13c32f6\/element\/bc244c90-ed18-4d94-9b7a-d026ba7d70d4\/text\n[0-0] 2019-12-25T17:54:37.709Z INFO webdriver: RESULT Cross Browser Testing Cloud\n[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: COMMAND findElement(\"xpath\", \".\/\/h1[@class='big_title text_shadow_black']\")\n[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/5f6efebb541063139a91dec5d13c32f6\/element\n[0-0] 2019-12-25T17:54:37.710Z INFO webdriver: DATA { using: 'xpath',\n value: '.\/\/h1[@class=\\'big_title text_shadow_black\\']' }\n\n\n\n\nID\n\n\n\nAnother crucial Selenium Locator of this WebdriverIO tutorial. The ID is an extremely powerful selector to find an element from DOM. This is always a unique element in the DOM. One more important thing is that, if you want to speed up your automation execution then this is a must use Locator for Selenium automation testing. The ID directly gets a search from DOM whereas XPath scan the documents based on a relative or absolute path which is a time-consuming method.\n\n\n\n# sign used to find elements using ID.\n\n\n\nSyntax:\n\n\n\n\n\n\n\n\n\n1\n\n\n\n$(#<idname>);\n\n\n\n\n\n\n\n\n\n\nExample:\n\n\n\n\nconst assert = require(\"assert\");\n \ndescribe(\"Selector Example\", function() {\n   it(\"Open URL\", function() {\n       driver.url(\"https:\/\/www.facebook.com\/\");\n   });\n   it(\"ID Example\", function() {\n       $(\"#email\").setValue(\"123\");\n   });\n});\n\n\n\n\nNow, here you should observe this output log. When you run the above script, you can see ID selector internally converted into css selector and finding the element.\n\n\n\nOutput:\n\n\n\n\n[0-0] 2019-12-25T18:29:26.359Z INFO webdriver: COMMAND findElement(\"css selector\", \"#email\")\n[0-0] 2019-12-25T18:29:26.360Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/52e465fa0b2d0dacaf976994dd1edc60\/element\n2019-12-25T18:29:26.360Z INFO webdriver: DATA { using: 'css selector', value: '#email' }\n\n\n\n\nNow, we have covered the usual Selenium locators in WebdriverIO. Next, we look at the advanced Selenium Locators\/ Selectors in this WebdriverIO tutorial.\n\n\n\nChain Selectors\n\n\n\nSometimes it gets difficult to find an element that has no ID, name and tables rows and cells, in such a case, this chain selector helps you to get your unique element. There is no specific symbol given for this but you just call $().$() until you find the desired element by period (.) sign.\n\n\n\nNote: Chain Selector\/Locator uses the parent-child concept. So the Next chain element should fall under the parent chain selector.\n\n\n\nSyntax:\n\n\n\n\n\n\n\n\n\n1\n\n\n\n$(selector).$(selector).$(selector)\n\n\n\n\n\n\n\n\n\n\nExample:\n\n\n\n\nconst assert = require(\"assert\");\n \ndescribe(\"Selector Example\", function() {\n   \n   it(\"Open URL\", function() {\n       driver.url(\"https:\/\/www.facebook.com\/\");\n   });\n   \n   it(\"Chain - Selector Example\", function() {\n       $(\"#login_form\")\n           .$(\".\/\/table[@role='presentation']\")\n           .$(\"#email\")\n           .setValue(\"123\");\n   });\n});\n\n\n\n\nWhen the script gets executed, each element starts finding element one by one until it reaches the final element. Firstly it uses findElement() and then calls findElementFromElement().\n\n\n\nOutput:\n\n\n\n\n0-0] 2019-12-26T06:14:22.748Z INFO webdriver: COMMAND findElement(\"css selector\", \"#login_form\")\n[0-0] 2019-12-26T06:14:22.748Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/3f354aaa54fb0ffee1fdf547ad3d9b04\/element\n[0-0] 2019-12-26T06:14:22.748Z INFO webdriver: DATA { using: 'css selector', value: '#login_form' }\n[0-0] 2019-12-26T06:14:22.760Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'f0736c61-735d-4cc8-82e1-1fd1e0f47b39' }\n[0-0] 2019-12-26T06:14:22.766Z INFO webdriver: COMMAND findElementFromElement(\"f0736c61-735d-4cc8-82e1-1fd1e0f47b39\", \"xpath\", \".\/\/table[@role='presentation']\")\n[0-0] 2019-12-26T06:14:22.766Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/3f354aaa54fb0ffee1fdf547ad3d9b04\/element\/f0736c61-735d-4cc8-82e1-1fd1e0f47b39\/element\n[0-0] 2019-12-26T06:14:22.766Z INFO webdriver: DATA { using: 'xpath', value: '.\/\/table[@role=\\'presentation\\']' }\n[0-0] 2019-12-26T06:14:22.778Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'ab53a7ad-fc8d-4081-810d-745b001fad02' }\n[0-0] 2019-12-26T06:14:22.779Z INFO webdriver: COMMAND findElementFromElement(\"ab53a7ad-fc8d-4081-810d-745b001fad02\", \"css selector\", \"#email\")\n[0-0] 2019-12-26T06:14:22.780Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/3f354aaa54fb0ffee1fdf547ad3d9b04\/element\/ab53a7ad-fc8d-4081-810d-745b001fad02\/element\n[0-0] 2019-12-26T06:14:22.780Z INFO webdriver: DATA { using: 'css selector', value: '#email' }\n[0-0] 2019-12-26T06:14:22.789Z INFO webdriver: RESULT { 'element-6066-11e4-a52e-4f735466cecf': '090696e4-585f-442c-a39d-dfe98f4d5d78' }\n[0-0] 2019-12-26T06:14:22.791Z INFO webdriver: COMMAND elementClear(\"090696e4-585f-442c-a39d-dfe98f4d5d78\")\n[0-0] 2019-12-26T06:14:22.791Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/3f354aaa54fb0ffee1fdf547ad3d9b04\/element\/090696e4-585f-442c-a39d-dfe98f4d5d78\/clear\n[0-0] 2019-12-26T06:14:22.817Z INFO webdriver: COMMAND elementSendKeys(\"090696e4-585f-442c-a39d-dfe98f4d5d78\", \"123\")\n[0-0] 2019-12-26T06:14:22.817Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/3f354aaa54fb0ffee1fdf547ad3d9b04\/element\/090696e4-585f-442c-a39d-dfe98f4d5d78\/value\n[0-0] 2019-12-26T06:14:22.817Z INFO webdriver: DATA { text: '123' }\n\n\n\n\nJS Function\n\n\n\nWebdriverIO supports JS selector\/locator to find the elements using a JavaScript.\n\n\n\nSyntax:\n\n\n\n\n\n\n\n\n\n1\n\n\n\n$(function() {return <JS script>})\n\n\n\n\n\n\n\n\n\n\nExample:\n\n\n\n\nconst assert = require(\"assert\");\n \ndescribe(\"Selector Example\", function() {\n   it(\"Open URL\", function() {\n       driver.url(\"https:\/\/www.lambdatest.com\/\");\n   });\n \n   it(\"JS Function Example\", function() {\n       const elem = $(\"\/\/*[@id='navbarSupportedContent']\/ul\/li[1]\");\n       console.log(\n           elem\n               .$(function() {\n                   return this.nextSibling.nextSibling;\n               })\n               .getText()\n       );\n   });\n});\n\n\n\n\nWeb Elements stored in the variable and then JS functions call with help if $(). It converted internally executeScript().\n\n\n\nOutput:\n\n\n\n\n[0-0] 2019-12-25T18:49:26.477Z INFO webdriver: COMMAND executeScript(, )\n[0-0] 2019-12-25T18:49:26.477Z INFO webdriver: [POST] http:\/\/127.0.0.1:4444\/session\/7ad49103a958fbdf72f36aa974c04f39\/execute\/sync\n[0-0] 2019-12-25T18:49:26.477Z INFO webdriver: DATA { script: 'return (function (elem) {\\n    return (function () {\\n\\t\\t\\t\\t\\treturn this.nextSibling.nextSibling;\\n\\t\\t\\t\\t}).call(elem);\\n  }).apply(null, arguments)',\n args:\n  [ { 'element-6066-11e4-a52e-4f735466cecf': 'b6cb6661-b048-418f-b1f8-58ed3f9836fe',\n      ELEMENT: 'b6cb6661-b048-418f-b1f8-58ed3f9836fe' } ] }\n\n\n\n\nReact Selector\n\n\n\nReact is another one of the advanced locators in WebdriverIO which has been provided to create custom react components for mobile apps. WebDriverIO has provided a feature that you can directly find an element using the react$() method.\n\n\n\nreact$$() method helps to find an array of WebDriverIO elements.\n\n\n\nSyntax:\n\n\n\n\n\n\n\n\n\n1\n\n\n\nreact$(\u2018ReactComponent\u2019);\n\n\n\n\n\n\n\n\n\n\nLet\u2019s understand by below React Native Example:\n\n\n\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n \nfunction RootComponent() {\n   return (\n       <div>\n           RootComponent\n       <\/div>\n   )\n}\nfunction App() {\n   return (<RootComponent \/>)\n}\nReactDOM.render(<App \/>, document.querySelector('#root'))\n\n\n\n\nIn the above example, \u2018RootComponent\u2019 is a react component and when it renders within HTML element with id=\u2019root\u2019.\n\n\n\nThis RootComponent can be found by react$() and below is the example:\n\n\n\n\n\n\n\n\n\n1\n\n\n\nconst rootComponent = browser.react$(\u2018RootComponent\u2019);\n\n\n\n\n\n\n\n\n\n\nCustom Selector\n\n\n\nOne of the most convenient Selenium locators\/ selectors in WebdriverIO which comes handy when facing complex scenarios for Selenium automation testing. The Custom selector allows you to use a customized strategy declared by using browser.addLocatorStrategy.\n\n\n\ncustom$$() method helps to find an array of WebDriverIO elements.\n\n\n\nSyntax:\n\n\n\n\n\n\n\n\n\n1\n\n\n\nbrowser.custom$(strategyName, strategyArguments)\n\n\n\n\n\n\n\n\n\n\nExample:\n\n\n\n\nconst assert = require(\"assert\");\ndescribe(\"Selector Example\", function() {\n  \n   it(\"Open URL\", function() {\n       driver.url(\"https:\/\/www.facebook.com\/\");\n   });\n   \n   it(\"Custom Selector Example - \", () => {\n       browser.addLocatorStrategy(\"emailById\", selector => {\n           return document.querySelectorAll(selector);\n       });\n       const emailID = browser.custom$(\"emailById\", \"#email\");\nemailID.setValue(\"abc@test.com\");\n   });\n});\n\n\n\n\nWith the help of addLocatorStrategy(), we have created \u2018emailById\u2019 custom selector for the email ID field and we can use emailById selector using the custom$() method. Internally, WebDriverIO converts custom$() into executeScript() and finds the element.\n\n\n\nNote: In this WebdriverIO tutorial, we have discussed single $() which helps to deal with a single element. All these selectors can be used with $$() for the array of WebDriverIO.\n\n\n\nConclusion\n\n\n\nWebDriverIO is one of the top JavaScript testing frameworks and when you look at the variety it offers for you to locate elements in a web page, you would be sure to make a note of it for your upcoming projects. It has a very unique selector choice including react$ and custom$ selectors. WebDriverIO has single way to find the element but has different signs for selector e.g * , *=, .(period) and # different. I am sure that this WebdriverIO tutorial will help you to take your knowledge on test automation to the next step. Happy testing! \n\n\n\n\n\n\n\n\n\n\n\n\nPublished on Java Code Geeks with permission by Ramit Dhamija, partner at our JCG program. See the original article here: How WebdriverIO Uses Selenium Locators in a Unique Way \u2013 A WebdriverIO Tutorial With Examples\nOpinions expressed by Java Code Geeks contributors are their own.\n\n\n\n\n\n","publisher":{"@id":"#Publisher","@type":"Organization","name":"Java Code Geeks","logo":{"@type":"ImageObject","url":"\/wp-content\/uploads\/2012\/12\/JavaCodeGeeks-logo.png"},"sameAs":["https:\/\/feeds.feedburner.com\/JavaCodeGeeks","https:\/\/www.facebook.com\/javacodegeeks","https:\/\/twitter.com\/javacodegeeks","https:\/\/www.linkedin.com\/groups\/3810709\/","https:\/\/www.youtube.com\/channel\/UCxoUc7Rar2q90Gu0nT2ffuQ","https:\/\/github.com\/javacodegeeks\/"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2020\/02\/how-webdriverio-uses-selenium-locators-in-a-unique-way-a-webdriverio-tutorial-with-examples.html","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Ramit Dhamija","url":"https:\/\/www.javacodegeeks.com\/author\/ramit-dhamija"},"image":{"@type":"ImageObject","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/selenium-logo.jpg","width":1200,"height":150}}</script> <div class="stream-item stream-item-below-post"><div class="stream-item-size" style=""><div id="adngin-under-post-0" style="margin-bottom: 20px; line-height:normal;"></div></div></div><div class="post-components"><div class="about-author container-wrapper about-author-91768"><div class="author-avatar">
<a href="https://www.javacodegeeks.com/author/ramit-dhamija">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMTgwIDE4MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" alt="Photo of Ramit Dhamija" data-src="https://secure.gravatar.com/avatar/e80e6fe5e5a8515322f5ebf571f8f91c?s=180&d=mm&r=g" data-srcset="https://secure.gravatar.com/avatar/e80e6fe5e5a8515322f5ebf571f8f91c?s=360&d=mm&r=g 2x" class="avatar avatar-180 photo" height="180" width="180" decoding="async"><noscript><img alt='Photo of Ramit Dhamija' src='https://secure.gravatar.com/avatar/e80e6fe5e5a8515322f5ebf571f8f91c?s=180&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/e80e6fe5e5a8515322f5ebf571f8f91c?s=360&d=mm&r=g 2x' class='avatar avatar-180 photo' height='180' width='180' decoding='async'/></noscript>                       </a></div><div class="author-info"><h3 class="author-name"><a href="https://www.javacodegeeks.com/author/ramit-dhamija">Ramit Dhamija</a></h3><div class="author-bio">
Working as an Automation Expert at LambdaTest and has recently started the professional journey. Excels in Java test automation.</div><ul class="social-icons"><li class="social-icons-item">
<a href="https://www.lambdatest.com" rel="external noopener nofollow" target="_blank" class="social-link url-social-icon">
<span class="tie-icon-home" aria-hidden="true"></span>
<span class="screen-reader-text">Website</span>
</a></li></ul></div><div class="clearfix"></div></div><div id="related-posts" class="container-wrapper"><div class="mag-box-title the-global-title"><h3>Related Articles</h3></div><div class="related-posts-list"><div class="related-item tie-standard">
<a aria-label="20 Best JavaScript Snippets" href="https://www.javacodegeeks.com/2023/05/20-best-javascript-snippets.html" class="post-thumb"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMTUwIDE1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" width="150" height="150" data-src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" data-srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" data-sizes="(max-width: 150px) 100vw, 150px"><noscript><img width="150" height="150" src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" sizes="(max-width: 150px) 100vw, 150px" /></noscript></a><h3 class="post-title"><a href="https://www.javacodegeeks.com/2023/05/20-best-javascript-snippets.html">20 Best JavaScript Snippets</a></h3><div class="post-meta clearfix"><span class="date meta-item tie-icon">May 15th, 2023</span></div></div><div class="related-item tie-standard">
<a aria-label="How to do pagination in Node.js" href="https://www.javacodegeeks.com/how-to-do-pagination-in-node-js.html" class="post-thumb"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMTUwIDE1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" width="150" height="150" data-src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" data-srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" data-sizes="(max-width: 150px) 100vw, 150px"><noscript><img width="150" height="150" src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" sizes="(max-width: 150px) 100vw, 150px" /></noscript></a><h3 class="post-title"><a href="https://www.javacodegeeks.com/how-to-do-pagination-in-node-js.html">How to do pagination in Node.js</a></h3><div class="post-meta clearfix"><span class="date meta-item tie-icon">December 1st, 2021</span></div></div><div class="related-item tie-standard">
<a aria-label="Comparison Of Two JS Frameworks: Angular vs. React" href="https://www.javacodegeeks.com/2023/03/comparison-of-two-js-frameworks-angular-vs-react.html" class="post-thumb"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMTUwIDE1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" width="150" height="150" data-src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" data-srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" data-sizes="(max-width: 150px) 100vw, 150px"><noscript><img width="150" height="150" src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" sizes="(max-width: 150px) 100vw, 150px" /></noscript></a><h3 class="post-title"><a href="https://www.javacodegeeks.com/2023/03/comparison-of-two-js-frameworks-angular-vs-react.html">Comparison Of Two JS Frameworks: Angular vs. React</a></h3><div class="post-meta clearfix"><span class="date meta-item tie-icon">March 6th, 2023</span></div></div><div class="related-item tie-standard">
<a aria-label="API Documentation in Node.js Using Swagger" href="https://www.javacodegeeks.com/api-documentation-in-node-js-using-swagger.html" class="post-thumb"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMTUwIDE1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" width="150" height="150" data-src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" data-srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" data-sizes="(max-width: 150px) 100vw, 150px"><noscript><img width="150" height="150" src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" sizes="(max-width: 150px) 100vw, 150px" /></noscript></a><h3 class="post-title"><a href="https://www.javacodegeeks.com/api-documentation-in-node-js-using-swagger.html">API Documentation in Node.js Using Swagger</a></h3><div class="post-meta clearfix"><span class="date meta-item tie-icon">December 29th, 2021</span></div></div><div class="related-item tie-standard">
<a aria-label="JavaScript Convert Character to ASCII and Vice Versa" href="https://www.javacodegeeks.com/2021/11/javascript-convert-character-to-ascii-and-vice-versa.html" class="post-thumb"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMTUwIDE1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" width="150" height="150" data-src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" data-srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" data-sizes="(max-width: 150px) 100vw, 150px"><noscript><img width="150" height="150" src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" sizes="(max-width: 150px) 100vw, 150px" /></noscript></a><h3 class="post-title"><a href="https://www.javacodegeeks.com/2021/11/javascript-convert-character-to-ascii-and-vice-versa.html">JavaScript Convert Character to ASCII and Vice Versa</a></h3><div class="post-meta clearfix"><span class="date meta-item tie-icon">November 27th, 2021</span></div></div><div class="related-item tie-standard">
<a aria-label="HTTP POST Request in Node using Axios" href="https://www.javacodegeeks.com/http-post-request-in-node-using-axios.html" class="post-thumb"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMTUwIDE1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" width="150" height="150" data-src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" data-srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" data-sizes="(max-width: 150px) 100vw, 150px"><noscript><img width="150" height="150" src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" sizes="(max-width: 150px) 100vw, 150px" /></noscript></a><h3 class="post-title"><a href="https://www.javacodegeeks.com/http-post-request-in-node-using-axios.html">HTTP POST Request in Node using Axios</a></h3><div class="post-meta clearfix"><span class="date meta-item tie-icon">April 28th, 2022</span></div></div><div class="related-item tie-standard">
<a aria-label="Testing promise rejection in JavaScript with Jest" href="https://www.javacodegeeks.com/2021/12/testing-promise-rejection-in-javascript-with-jest.html" class="post-thumb"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMTUwIDE1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" width="150" height="150" data-src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" data-srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" data-sizes="(max-width: 150px) 100vw, 150px"><noscript><img width="150" height="150" src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" sizes="(max-width: 150px) 100vw, 150px" /></noscript></a><h3 class="post-title"><a href="https://www.javacodegeeks.com/2021/12/testing-promise-rejection-in-javascript-with-jest.html">Testing promise rejection in JavaScript with Jest</a></h3><div class="post-meta clearfix"><span class="date meta-item tie-icon">December 13th, 2021</span></div></div><div class="related-item tie-standard">
<a aria-label="Starting with AJAX Cheatsheet" href="https://www.javacodegeeks.com/starting-with-ajax-cheatsheet.html" class="post-thumb"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMTUwIDE1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" width="150" height="150" data-src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" data-srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" data-sizes="(max-width: 150px) 100vw, 150px"><noscript><img width="150" height="150" src="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" decoding="async" srcset="https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo.jpg.webp 150w, https://www.javacodegeeks.com/wp-content/uploads/2014/01/javascript-logo-70x70.jpg.webp 70w" sizes="(max-width: 150px) 100vw, 150px" /></noscript></a><h3 class="post-title"><a href="https://www.javacodegeeks.com/starting-with-ajax-cheatsheet.html">Starting with AJAX Cheatsheet</a></h3><div class="post-meta clearfix"><span class="date meta-item tie-icon">March 16th, 2023</span></div></div></div></div><div class="wpdiscuz_top_clearing"></div><div id="comments" class="comments-area"><div id="respond" style="width: 0;height: 0;clear: both;margin: 0;padding: 0;"></div><div id="wpdcom" class="wpdiscuz_unauth wpd-default wpd-layout-1 wpd-comments-open"><div id="add-comment-block" class="container-wrapper"><div class="wc_social_plugin_wrapper"></div><div class="wpd-form-wrap"><div class="wpd-form-head"><div class="wpd-sbs-toggle">
<i class="far fa-envelope"></i> <span class="wpd-sbs-title">Subscribe</span>
<i class="fas fa-caret-down"></i></div><div class="wpd-auth"><div class="wpd-login"></div></div></div><div class="wpdiscuz-subscribe-bar wpdiscuz-hidden"><form action="https://www.javacodegeeks.com/wp-admin/admin-ajax.php?action=wpdAddSubscription" method="post" id="wpdiscuz-subscribe-form"><div class="wpdiscuz-subscribe-form-intro">Notify of</div><div class="wpdiscuz-subscribe-form-option" style="width:40%;">
<select class="wpdiscuz_select" name="wpdiscuzSubscriptionType"><option value="post">new follow-up comments</option><option value="all_comment">new replies to my comments</option>
</select></div><div class="wpdiscuz-item wpdiscuz-subscribe-form-email">
<input class="email" type="email" name="wpdiscuzSubscriptionEmail" required="required" value="" placeholder="Email"></div><div class="wpdiscuz-subscribe-form-button">
<input id="wpdiscuz_subscription_button" class="wpd-prim-button wpd_not_clicked" type="submit" value="›" name="wpdiscuz_subscription_button"></div>
<input type="hidden" id="wpdiscuz_subscribe_form_nonce" name="wpdiscuz_subscribe_form_nonce" value="cb06c4e65c"><input type="hidden" name="_wp_http_referer" value="/2020/02/how-webdriverio-uses-selenium-locators-in-a-unique-way-a-webdriverio-tutorial-with-examples.html"></form></div><div class="wpd-form wpd-form-wrapper wpd-main-form-wrapper" id="wpd-main-form-wrapper-0_0"><form method="post" enctype="multipart/form-data" data-uploading="false" class="wpd_comm_form wpd_main_comm_form"><div class="wpd-field-comment"><div class="wpdiscuz-item wc-field-textarea"><div class="wpdiscuz-textarea-wrap "><div class="wpd-avatar">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgdmlld0JveD0iMCAwIDU2IDU2Ij48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ0cmFuc3BhcmVudCIvPjwvc3ZnPg==" alt="guest" data-src="https://secure.gravatar.com/avatar/341a53bd6a1d8cff32e5005b002efa8a?s=56&d=mm&r=g" data-srcset="https://secure.gravatar.com/avatar/341a53bd6a1d8cff32e5005b002efa8a?s=112&d=mm&r=g 2x" class="avatar avatar-56 photo" height="56" width="56" decoding="async"><noscript><img alt='guest' src='https://secure.gravatar.com/avatar/341a53bd6a1d8cff32e5005b002efa8a?s=56&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/341a53bd6a1d8cff32e5005b002efa8a?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' decoding='async'/></noscript></div><div id="wpd-editor-wraper-0_0" style="display: none;"><div id="wpd-editor-char-counter-0_0" class="wpd-editor-char-counter"></div>
<label style="display: none;" for="wc-textarea-0_0">Label</label><textarea id="wc-textarea-0_0" name="wc_comment" class="wc_comment wpd-field"></textarea><div id="wpd-editor-0_0"></div><div id="wpd-editor-toolbar-0_0">
<button title="Bold" class="ql-bold"></button>
<button title="Italic" class="ql-italic"></button>
<button title="Underline" class="ql-underline"></button>
<button title="Strike" class="ql-strike"></button>
<button title="Ordered List" class="ql-list" value="ordered"></button>
<button title="Unordered List" class="ql-list" value="bullet"></button>
<button title="Blockquote" class="ql-blockquote"></button>
<button title="Code Block" class="ql-code-block"></button>
<button title="Link" class="ql-link"></button>
<button title="Source Code" class="ql-sourcecode" data-wpde_button_name="sourcecode">{}</button>
<button title="Spoiler" class="ql-spoiler" data-wpde_button_name="spoiler">[+]</button><div class="wpd-editor-buttons-right">
<span class="wmu-upload-wrap" wpd-tooltip="Attach an image to this comment" wpd-tooltip-position="left"><label class="wmu-add"><i class="far fa-image"></i><input style="display:none;" class="wmu-add-files" type="file" name="wmu_files" accept="image/*"></label></span></div></div></div></div></div></div><div class="wpd-form-foot" style="display:none;"><div class="wpdiscuz-textarea-foot"><div class="wpdiscuz-button-actions"><div class="wmu-action-wrap"><div class="wmu-tabs wmu-images-tab wmu-hide"></div></div></div></div><div class="wpd-form-row"><div class="wpd-form-col-left"><div class="wpdiscuz-item wc_name-wrapper wpd-has-icon"><div class="wpd-field-icon"><i class="fas fa-user"></i></div>
<input id="wc_name-0_0" value="" required="required" aria-required="true" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Name*" maxlength="50" pattern=".{3,50}" title="">
<label for="wc_name-0_0" class="wpdlb">Name*</label></div><div class="wpdiscuz-item wc_email-wrapper wpd-has-icon"><div class="wpd-field-icon"><i class="fas fa-at"></i></div>
<input id="wc_email-0_0" value="" required="required" aria-required="true" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
<label for="wc_email-0_0" class="wpdlb">Email*</label></div><div class="wpdiscuz-item wc_website-wrapper wpd-has-icon"><div class="wpd-field-icon"><i class="fas fa-link"></i></div>
<input id="wc_website-0_0" value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
<label for="wc_website-0_0" class="wpdlb">Website</label></div></div><div class="wpd-form-col-right"><div class="wpdiscuz-item wpd-field-group wpd-field-checkbox wpd-field-agreement wpd-field-single custom_field_5b07f3252b224-wrapper wpd-required-group wpd-has-desc"><div class="wpd-field-group-title"><div class="wpd-item">
<input id="custom_field_5b07f3252b224-1_0_0" type="checkbox" name="custom_field_5b07f3252b224" value="1" class="custom_field_5b07f3252b224 wpd-field wpd-agreement-checkbox  wpd_agreement_hide " required="">
<label class="wpd-field-label wpd-cursor-pointer" for="custom_field_5b07f3252b224-1_0_0">I agree to the <a href="https://www.javacodegeeks.com/about/terms-of-use" target="_blank">Terms</a> and <a href="https://www.javacodegeeks.com/about/privacy-policy" target="_blank">Privacy Policy</a></label></div></div><div class="wpd-field-desc">
<i class="far fa-question-circle"></i><span>The comment form collects your name, email and content to allow us keep track of the comments placed on the website.  Please read and accept our website Terms and Privacy Policy to post a comment.</span></div></div><div class="wc-field-submit">
<label class="wpd_label" wpd-tooltip="Notify of new replies to this comment">
<input id="wc_notification_new_comment-0_0" class="wc_notification_new_comment-0_0 wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type">
<span class="wpd_label__text">
<span class="wpd_label__check">
<i class="fas fa-bell wpdicon wpdicon-on"></i>
<i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
</span>
</span>
</label>
<input id="wpd-field-submit-0_0" class="wc_comm_submit wpd_not_clicked wpd-prim-button" type="submit" name="submit" value="Post Comment" aria-label="Post Comment"></div></div><div class="clearfix"></div></div></div>
<input type="hidden" class="wpdiscuz_unique_id" value="0_0" name="wpdiscuz_unique_id"><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="a29507698c"></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="1742017828070"><script src="data:text/javascript;base64,ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImFrX2pzXzEiKS5zZXRBdHRyaWJ1dGUoInZhbHVlIiwobmV3IERhdGUoKSkuZ2V0VGltZSgpKQ==" defer=""></script></p></form></div><div id="wpdiscuz_hidden_secondary_form" style="display: none;"><div class="wpd-form wpd-form-wrapper wpd-secondary-form-wrapper" id="wpd-secondary-form-wrapper-wpdiscuzuniqueid" style="display: none;"><div class="wpd-secondary-forms-social-content"></div><div class="clearfix"></div><form method="post" enctype="multipart/form-data" data-uploading="false" class="wpd_comm_form wpd-secondary-form-wrapper"><div class="wpd-field-comment"><div class="wpdiscuz-item wc-field-textarea"><div class="wpdiscuz-textarea-wrap "><div class="wpd-avatar">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSI1NiIgdmlld0JveD0iMCAwIDU2IDU2Ij48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ0cmFuc3BhcmVudCIvPjwvc3ZnPg==" alt="guest" data-src="https://secure.gravatar.com/avatar/5a71e213ff502ff6a3a4ac73cd0ad1d8?s=56&d=mm&r=g" data-srcset="https://secure.gravatar.com/avatar/5a71e213ff502ff6a3a4ac73cd0ad1d8?s=112&d=mm&r=g 2x" class="avatar avatar-56 photo" height="56" width="56" decoding="async"><noscript><img alt='guest' src='https://secure.gravatar.com/avatar/5a71e213ff502ff6a3a4ac73cd0ad1d8?s=56&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/5a71e213ff502ff6a3a4ac73cd0ad1d8?s=112&d=mm&r=g 2x' class='avatar avatar-56 photo' height='56' width='56' decoding='async'/></noscript></div><div id="wpd-editor-wraper-wpdiscuzuniqueid" style="display: none;"><div id="wpd-editor-char-counter-wpdiscuzuniqueid" class="wpd-editor-char-counter"></div>
<label style="display: none;" for="wc-textarea-wpdiscuzuniqueid">Label</label><textarea id="wc-textarea-wpdiscuzuniqueid" name="wc_comment" class="wc_comment wpd-field"></textarea><div id="wpd-editor-wpdiscuzuniqueid"></div><div id="wpd-editor-toolbar-wpdiscuzuniqueid">
<button title="Bold" class="ql-bold"></button>
<button title="Italic" class="ql-italic"></button>
<button title="Underline" class="ql-underline"></button>
<button title="Strike" class="ql-strike"></button>
<button title="Ordered List" class="ql-list" value="ordered"></button>
<button title="Unordered List" class="ql-list" value="bullet"></button>
<button title="Blockquote" class="ql-blockquote"></button>
<button title="Code Block" class="ql-code-block"></button>
<button title="Link" class="ql-link"></button>
<button title="Source Code" class="ql-sourcecode" data-wpde_button_name="sourcecode">{}</button>
<button title="Spoiler" class="ql-spoiler" data-wpde_button_name="spoiler">[+]</button><div class="wpd-editor-buttons-right">
<span class="wmu-upload-wrap" wpd-tooltip="Attach an image to this comment" wpd-tooltip-position="left"><label class="wmu-add"><i class="far fa-image"></i><input style="display:none;" class="wmu-add-files" type="file" name="wmu_files" accept="image/*"></label></span></div></div></div></div></div></div><div class="wpd-form-foot" style="display:none;"><div class="wpdiscuz-textarea-foot"><div class="wpdiscuz-button-actions"><div class="wmu-action-wrap"><div class="wmu-tabs wmu-images-tab wmu-hide"></div></div></div></div><div class="wpd-form-row"><div class="wpd-form-col-left"><div class="wpdiscuz-item wc_name-wrapper wpd-has-icon"><div class="wpd-field-icon"><i class="fas fa-user"></i></div>
<input id="wc_name-wpdiscuzuniqueid" value="" required="required" aria-required="true" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Name*" maxlength="50" pattern=".{3,50}" title="">
<label for="wc_name-wpdiscuzuniqueid" class="wpdlb">Name*</label></div><div class="wpdiscuz-item wc_email-wrapper wpd-has-icon"><div class="wpd-field-icon"><i class="fas fa-at"></i></div>
<input id="wc_email-wpdiscuzuniqueid" value="" required="required" aria-required="true" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
<label for="wc_email-wpdiscuzuniqueid" class="wpdlb">Email*</label></div><div class="wpdiscuz-item wc_website-wrapper wpd-has-icon"><div class="wpd-field-icon"><i class="fas fa-link"></i></div>
<input id="wc_website-wpdiscuzuniqueid" value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
<label for="wc_website-wpdiscuzuniqueid" class="wpdlb">Website</label></div></div><div class="wpd-form-col-right"><div class="wpdiscuz-item wpd-field-group wpd-field-checkbox wpd-field-agreement wpd-field-single custom_field_5b07f3252b224-wrapper wpd-required-group wpd-has-desc"><div class="wpd-field-group-title"><div class="wpd-item">
<input id="custom_field_5b07f3252b224-1_wpdiscuzuniqueid" type="checkbox" name="custom_field_5b07f3252b224" value="1" class="custom_field_5b07f3252b224 wpd-field wpd-agreement-checkbox  wpd_agreement_hide " required="">
<label class="wpd-field-label wpd-cursor-pointer" for="custom_field_5b07f3252b224-1_wpdiscuzuniqueid">I agree to the <a href="https://www.javacodegeeks.com/about/terms-of-use" target="_blank">Terms</a> and <a href="https://www.javacodegeeks.com/about/privacy-policy" target="_blank">Privacy Policy</a></label></div></div><div class="wpd-field-desc">
<i class="far fa-question-circle"></i><span>The comment form collects your name, email and content to allow us keep track of the comments placed on the website.  Please read and accept our website Terms and Privacy Policy to post a comment.</span></div></div><div class="wc-field-submit">
<label class="wpd_label" wpd-tooltip="Notify of new replies to this comment">
<input id="wc_notification_new_comment-wpdiscuzuniqueid" class="wc_notification_new_comment-wpdiscuzuniqueid wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type">
<span class="wpd_label__text">
<span class="wpd_label__check">
<i class="fas fa-bell wpdicon wpdicon-on"></i>
<i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
</span>
</span>
</label>
<input id="wpd-field-submit-wpdiscuzuniqueid" class="wc_comm_submit wpd_not_clicked wpd-prim-button" type="submit" name="submit" value="Post Comment" aria-label="Post Comment"></div></div><div class="clearfix"></div></div></div>
<input type="hidden" class="wpdiscuz_unique_id" value="wpdiscuzuniqueid" name="wpdiscuz_unique_id"><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="a29507698c"></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_2" name="ak_js" value="1742017828070"><script src="data:text/javascript;base64,ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImFrX2pzXzIiKS5zZXRBdHRyaWJ1dGUoInZhbHVlIiwobmV3IERhdGUoKSkuZ2V0VGltZSgpKQ==" defer=""></script></p></form></div></div></div><p class="akismet_comment_form_privacy_notice">This site uses Akismet to reduce spam. <a href="https://akismet.com/privacy/" target="_blank" rel="nofollow noopener">Learn how your comment data is processed.</a></p></div><div id="wpd-threads" class="wpd-thread-wrapper"><div class="wpd-thread-head"><div class="wpd-thread-info " data-comments-count="0">
<span class="wpdtc" title="0">0</span> Comments</div><div class="wpd-space"></div><div class="wpd-thread-filter"><div class="wpd-filter wpdf-reacted wpd_not_clicked wpdiscuz-hidden" wpd-tooltip="Most reacted comment">
<i class="fas fa-bolt"></i></div><div class="wpd-filter wpdf-hottest wpd_not_clicked wpdiscuz-hidden" wpd-tooltip="Hottest comment thread">
<i class="fas fa-fire"></i></div><div class="wpd-filter wpdf-sorting wpdiscuz-hidden">
<span class="wpdiscuz-sort-button wpdiscuz-date-sort-asc wpdiscuz-sort-button-active" data-sorting="oldest">Oldest</span>
<i class="fas fa-sort-down"></i><div class="wpdiscuz-sort-buttons">
<span class="wpdiscuz-sort-button wpdiscuz-date-sort-desc" data-sorting="newest">Newest</span>
<span class="wpdiscuz-sort-button wpdiscuz-vote-sort-up" data-sorting="by_vote">Most Voted</span></div></div></div></div><div class="wpd-comment-info-bar"><div class="wpd-current-view"><i class="fas fa-quote-left"></i> Inline Feedbacks</div><div class="wpd-filter-view-all">View all comments</div></div><div class="wpd-thread-list"><div class="wpdiscuz-comment-pagination"></div></div></div></div></div><div id="wpdiscuz-loading-bar" class="wpdiscuz-loading-bar-unauth"></div><div id="wpdiscuz-comment-message" class="wpdiscuz-comment-message-unauth"></div></div><aside class="sidebar tie-col-md-4 tie-col-xs-12 normal-side is-sticky" aria-label="Primary Sidebar"><div class="theiaStickySidebar"><div id="text-html-widget-2" class="container-wrapper widget text-html"><div><div id="adngin-side-0" style="width:300px; height:274px;"></div></div><div class="clearfix"></div></div><div id="text-html-widget-5" class="container-wrapper widget text-html"><div class="widget-title the-global-title"><div class="the-subtitle">Join Us<span class="widget-title-icon tie-icon"></span></div></div><div><div style="width:150px; height:150px; float:left; margin-top:-10px; margin-left:-10px;">
<img title="Join Us" alt="Join Us" src="/wp-content/uploads/2013/04/w4g-badge-150x150.png.webp" width="150" height="150"></div>
With <label style="border:1px solid #D8D8D8;background:#F0F0F0;border-radius:3px;-moz-border-radius:3px;text-shadow: 1px 1px #D0D0D0;text-align:center;font-weight:bold;padding-left:3px;padding-right:3px">1,240,600</label> monthly unique visitors and over <label style="border:1px solid #D8D8D8;background:#F0F0F0;border-radius:3px;-moz-border-radius:3px;text-shadow: 1px 1px #D0D0D0;text-align:center;font-weight:bold;padding-left:3px;padding-right:3px">500</label> authors we are placed among the top Java related sites around. Constantly being on the lookout for partners; we encourage you to join us. So If you have a blog with unique and interesting content then you should check out our <strong><a href="//www.javacodegeeks.com/join-us/jcg">JCG</a></strong> partners program. You can also be a <strong><a href="//www.javacodegeeks.com/join-us/w4g">guest writer</a></strong> for Java Code Geeks and hone your writing skills!</div><div class="clearfix"></div></div><div id="text-html-widget-3" class="container-wrapper widget text-html"><div><div id="adngin-side1-0" style="width:300px; height:274px;"></div></div><div class="clearfix"></div></div><div id="text-html-widget-9" class="container-wrapper widget text-html"><div class="widget-title the-global-title"><div class="the-subtitle">Newsletter<span class="widget-title-icon tie-icon"></span></div></div><div><style>.lepopup-progress-152 div.lepopup-progress-t1>div{background-color:#e0e0e0;}.lepopup-progress-152 div.lepopup-progress-t1>div>div{background-color:#bd4070;}.lepopup-progress-152 div.lepopup-progress-t1>div>div{color:#ffffff;}.lepopup-progress-152 div.lepopup-progress-t1>label{color:#444444;}.lepopup-form-152, .lepopup-form-152 *, .lepopup-progress-152 {font-size:15px;color:#444444;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-152 .lepopup-element div.lepopup-input div.lepopup-signature-box span i{font-family:'Arial','arial';font-size:13px;color:#555555;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-152 .lepopup-element div.lepopup-input div.lepopup-signature-box,.lepopup-form-152 .lepopup-element div.lepopup-input div.lepopup-multiselect,.lepopup-form-152 .lepopup-element div.lepopup-input input[type='text'],.lepopup-form-152 .lepopup-element div.lepopup-input input[type='email'],.lepopup-form-152 .lepopup-element div.lepopup-input input[type='password'],.lepopup-form-152 .lepopup-element div.lepopup-input select,.lepopup-form-152 .lepopup-element div.lepopup-input select option,.lepopup-form-152 .lepopup-element div.lepopup-input textarea{font-family:'Arial','arial';font-size:13px;color:#555555;font-style:normal;text-decoration:none;text-align:left;background-color:rgba(255, 255, 255, 0.7);background-image:none;border-width:1px;border-style:solid;border-color:#cccccc;border-radius:0px;box-shadow: inset 0px 0px 15px -7px #000000;}.lepopup-form-152 .lepopup-element div.lepopup-input ::placeholder{color:#555555; opacity: 0.9;} .lepopup-form-152 .lepopup-element div.lepopup-input ::-ms-input-placeholder{color:#555555; opacity: 0.9;}.lepopup-form-152 .lepopup-element div.lepopup-input div.lepopup-multiselect::-webkit-scrollbar-thumb{background-color:#cccccc;}.lepopup-form-152 .lepopup-element div.lepopup-input>i.lepopup-icon-left, .lepopup-form-152 .lepopup-element div.lepopup-input>i.lepopup-icon-right{font-size:20px;color:#444444;border-radius:0px;}.lepopup-form-152 .lepopup-element .lepopup-button,.lepopup-form-152 .lepopup-element .lepopup-button:visited{font-family:'Arial','arial';font-size:13px;color:#ffffff;font-weight:700;font-style:normal;text-decoration:none;text-align:center;background-color:#326693;background-image:none;border-width:1px;border-style:solid;border-color:#326693;border-radius:0px;box-shadow:none;}.lepopup-form-152 .lepopup-element div.lepopup-input .lepopup-imageselect+label{border-width:1px;border-style:solid;border-color:#cccccc;border-radius:0px;box-shadow:none;}.lepopup-form-152 .lepopup-element div.lepopup-input .lepopup-imageselect+label span.lepopup-imageselect-label{font-size:15px;color:#444444;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-152 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-tgl:checked+label:after{background-color:rgba(255, 255, 255, 0.7);}.lepopup-form-152 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-classic+label,.lepopup-form-152 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-fa-check+label,.lepopup-form-152 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-square+label,.lepopup-form-152 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-tgl+label{background-color:rgba(255, 255, 255, 0.7);border-color:#cccccc;color:#555555;}.lepopup-form-152 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-square:checked+label:after{background-color:#555555;}.lepopup-form-152 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-tgl:checked+label,.lepopup-form-152 .lepopup-element div.lepopup-input input[type='checkbox'].lepopup-checkbox-tgl+label:after{background-color:#555555;}.lepopup-form-152 .lepopup-element div.lepopup-input input[type='radio'].lepopup-radio-classic+label,.lepopup-form-152 .lepopup-element div.lepopup-input input[type='radio'].lepopup-radio-fa-check+label,.lepopup-form-152 .lepopup-element div.lepopup-input input[type='radio'].lepopup-radio-dot+label{background-color:rgba(255, 255, 255, 0.7);border-color:#cccccc;color:#555555;}.lepopup-form-152 .lepopup-element div.lepopup-input input[type='radio'].lepopup-radio-dot:checked+label:after{background-color:#555555;}.lepopup-form-152 .lepopup-element div.lepopup-input div.lepopup-multiselect>input[type='checkbox']+label:hover{background-color:#bd4070;color:#ffffff;}.lepopup-form-152 .lepopup-element div.lepopup-input div.lepopup-multiselect>input[type='checkbox']:checked+label{background-color:#a93a65;color:#ffffff;}.lepopup-form-152 .lepopup-element input[type='checkbox'].lepopup-tile+label, .lepopup-form-152 .lepopup-element input[type='radio'].lepopup-tile+label {font-size:15px;color:#444444;font-style:normal;text-decoration:none;text-align:center;background-color:#ffffff;background-image:none;border-width:1px;border-style:solid;border-color:#cccccc;border-radius:0px;box-shadow:none;}.lepopup-form-152 .lepopup-element-error{font-size:15px;color:#ffffff;font-style:normal;text-decoration:none;text-align:left;background-color:#d9534f;background-image:none;}.lepopup-form-152 .lepopup-element-2 * {font-family:'Arial','arial';font-size:14px;color:#000000;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-152 .lepopup-element-2 {font-family:'Arial','arial';font-size:14px;color:#000000;font-style:normal;text-decoration:none;text-align:left;background-color:rgba(255, 255, 255, 0.5);background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-152 .lepopup-element-2 .lepopup-element-html-content {min-height:310px;}.lepopup-form-152 .lepopup-element-3 * {font-size:15px;color:#333333;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-152 .lepopup-element-3 {font-size:15px;color:#333333;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-152 .lepopup-element-3 .lepopup-element-html-content {min-height:39px;}.lepopup-form-152 .lepopup-element-4 * {font-size:15px;color:#333333;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-152 .lepopup-element-4 {font-size:15px;color:#333333;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-152 .lepopup-element-4 .lepopup-element-html-content {min-height:135px;}.lepopup-form-152 .lepopup-element-10, .lepopup-form-152 .lepopup-element-10 * {font-size:15px;color:#444444;font-weight:700;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-152 .lepopup-element-5 div.lepopup-input .lepopup-icon-left, .lepopup-form-152 .lepopup-element-5 div.lepopup-input .lepopup-icon-right {line-height:35px;}.lepopup-form-152 .lepopup-element-6 div.lepopup-input{height:auto;line-height:1;}.lepopup-form-152 .lepopup-element-7 * {font-size:15px;color:#333333;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-152 .lepopup-element-7 {font-size:15px;color:#333333;font-style:normal;text-decoration:none;text-align:left;background-color:transparent;background-image:none;border-width:1px;border-style:none;border-color:transparent;border-radius:0px;box-shadow:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.lepopup-form-152 .lepopup-element-7 .lepopup-element-html-content {min-height:24px;}.lepopup-form-152 .lepopup-element-0 * {font-size:15px;color:#ffffff;font-style:normal;text-decoration:none;text-align:left;}.lepopup-form-152 .lepopup-element-0 {font-size:15px;color:#ffffff;font-style:normal;text-decoration:none;text-align:left;background-color:#5cb85c;background-image:none;border-width:0px;border-style:solid;border-color:#cccccc;border-radius:5px;box-shadow: 1px 1px 15px -6px #000000;padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;}.lepopup-form-152 .lepopup-element-0 .lepopup-element-html-content {min-height:160px;}</style><div class="lepopup-inline" style="margin: 0 auto;"><div class="lepopup-form lepopup-form-152 lepopup-form-z6ayU6c6yoFisECg lepopup-form-icon-inside lepopup-form-position-middle-left" data-session="0" data-id="z6ayU6c6yoFisECg" data-form-id="152" data-slug="K2BBSrqEzVTzL7pc" data-title="Sidebar Inline" data-page="1" data-xd="off" data-width="336" data-height="310" data-position="middle-left" data-esc="off" data-enter="on" data-disable-scrollbar="off" style="display:none;width:336px;height:310px;" onclick="event.stopPropagation();"><div class="lepopup-form-inner" style="width:336px;height:310px;"><div class="lepopup-element lepopup-element-2 lepopup-element-html" data-type="html" data-top="0" data-left="0" data-animation-in="fadeIn" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:500;top:0px;left:0px;width:335px;height:310px;"><div class="lepopup-element-html-content"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMzUiIGhlaWdodD0iMzEwIiB2aWV3Qm94PSIwIDAgMzM1IDMxMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=" data-src="https://www.javacodegeeks.com/wp-content/uploads/2018/01/newsletter-bg.jpg.webp" width="335" height="310"><noscript><img src="https://www.javacodegeeks.com/wp-content/uploads/2018/01/newsletter-bg.jpg.webp" width="335" height="310"/></noscript></div></div><div class="lepopup-element lepopup-element-3 lepopup-element-html" data-type="html" data-top="6" data-left="6" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:501;top:6px;left:6px;width:320px;height:39px;"><div class="lepopup-element-html-content">Insiders are already enjoying weekly updates and complimentary whitepapers!</div></div><div class="lepopup-element lepopup-element-4 lepopup-element-html" data-type="html" data-top="45" data-left="6" data-animation-in="bounceInDown" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:502;top:45px;left:6px;width:320px;height:135px;"><div class="lepopup-element-html-content"><span style="text-shadow: 1px 1px #D0D0D0; font-weight: bold; font-size: 14pt; display: inline;">Join them now</span> to gain <span style="text-decoration: underline;  font-size: 14pt;">exclusive access</span> to the latest news in the Java world, as well as insights about Android, JVM languages, cloud computing, Web development, DevOps, big data, Web3, blockchain programming and other related technologies.</div></div><div class="lepopup-element lepopup-element-10 lepopup-element-html" data-type="label" data-top="178" data-left="6" data-animation-in="fadeIn" data-animation-out="fadeOut" style="animation-duration:1000ms;animation-delay:0ms;z-index:503;top:178px;left:6px;width:117px;height:24px;">Email address:</div><div class="lepopup-element lepopup-element-5" data-type="email" data-deps="" data-id="5" data-top="201" data-left="6" data-animation-in="fadeIn" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:504;top:201px;left:6px;width:319px;height:35px;"><div class="lepopup-input"><input type="email" name="lepopup-5" class="lepopup-ta-left " placeholder="Enter your e-mail..." autocomplete="email" data-default="" value="" aria-label="Email Field" oninput="lepopup_input_changed(this);" onfocus="lepopup_input_error_hide(this);"></div></div><div class="lepopup-element lepopup-element-6" data-type="checkbox" data-deps="" data-id="6" data-top="240" data-left="6" data-animation-in="fadeIn" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:505;top:240px;left:6px;width:164px;"><div class="lepopup-input lepopup-cr-layout-1 lepopup-cr-layout-left"><div class="lepopup-cr-container lepopup-cr-container-medium lepopup-cr-container-left"><div class="lepopup-cr-box"><input class="lepopup-checkbox lepopup-checkbox-classic lepopup-checkbox-medium" type="checkbox" name="lepopup-6[]" id="lepopup-checkbox-RRPjYpALop1pL1ST-5-0" value="on" data-default="off" onchange="lepopup_input_changed(this);"><label for="lepopup-checkbox-RRPjYpALop1pL1ST-5-0" onclick="lepopup_input_error_hide(this);"></label></div><div class="lepopup-cr-label lepopup-ta-left"><label for="lepopup-checkbox-RRPjYpALop1pL1ST-5-0" onclick="lepopup_input_error_hide(this);"></label></div></div></div></div><div class="lepopup-element lepopup-element-7 lepopup-element-html" data-type="html" data-top="240" data-left="36" data-animation-in="fadeIn" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:506;top:240px;left:36px;width:269px;height:24px;"><div class="lepopup-element-html-content">I agree to the <a href="https://www.systemcodegeeks.com/about/terms-of-use/" target="_blank">Terms </a> and <a href="https://www.javacodegeeks.com/about/privacy-policy/" target="_blank">Privacy Policy</a></div></div><div class="lepopup-element lepopup-element-8" data-type="button" data-top="264" data-left="6" data-animation-in="bounceIn" data-animation-out="fadeOut" style="animation-duration:0ms;animation-delay:0ms;z-index:507;top:264px;left:6px;width:85px;height:37px;"><a class="lepopup-button lepopup-button-zoom-out " href="#" onclick="return lepopup_submit(this);" data-label="Sign up" data-loading="Loading..."><span>Sign up</span></a></div></div></div><div class="lepopup-form lepopup-form-152 lepopup-form-z6ayU6c6yoFisECg lepopup-form-icon-inside lepopup-form-position-middle-left" data-session="0" data-id="z6ayU6c6yoFisECg" data-form-id="152" data-slug="K2BBSrqEzVTzL7pc" data-title="Sidebar Inline" data-page="confirmation" data-xd="off" data-width="420" data-height="320" data-position="middle-left" data-esc="off" data-enter="on" data-disable-scrollbar="off" style="display:none;width:420px;height:320px;" onclick="event.stopPropagation();"><div class="lepopup-form-inner" style="width:420px;height:320px;"><div class="lepopup-element lepopup-element-0 lepopup-element-html" data-type="html" data-top="80" data-left="70" data-animation-in="bounceInDown" data-animation-out="fadeOutUp" style="animation-duration:1000ms;animation-delay:0ms;z-index:509;top:80px;left:70px;width:280px;height:160px;"><div class="lepopup-element-html-content"><h4 style="text-align: center; font-size: 18px; font-weight: bold;">Thank you!</h4><p style="text-align: center;">We will contact you soon.</p></div></div></div></div><input type="hidden" id="lepopup-logic-z6ayU6c6yoFisECg" value="[]"></div></div><div class="clearfix"></div></div><div id="text-html-widget-4" class="container-wrapper widget text-html"><div><div id="adngin-side2-0" style="width:300px; height:614px; margin-bottom:30px;"></div></div><div class="clearfix"></div></div></div></aside><footer id="footer" class="site-footer dark-skin dark-widgetized-area"><div id="footer-widgets-container"><div class="container"><div class="footer-widget-area "><div class="tie-row"><div class="tie-col-sm-3 normal-side"><div id="linkcat-4" class="container-wrapper widget widget_links"><div class="widget-title the-global-title"><div class="the-subtitle">Knowledge Base<span class="widget-title-icon tie-icon"></span></div></div><ul class="xoxo blogroll"><li><a href="//courses.javacodegeeks.com/" rel="noopener" target="_blank">Courses</a></li><li><a href="//examples.javacodegeeks.com/" rel="noopener" target="_blank">Examples</a></li><li><a href="//www.javacodegeeks.com/minibook" rel="noopener" target="_blank">Minibooks</a></li><li><a href="//www.javacodegeeks.com/resources" rel="noopener" target="_blank">Resources</a></li><li><a href="//www.javacodegeeks.com/tutorials" rel="noopener" target="_blank">Tutorials</a></li></ul><div class="clearfix"></div></div><div id="linkcat-3" class="container-wrapper widget widget_links"><div class="widget-title the-global-title"><div class="the-subtitle">Partners<span class="widget-title-icon tie-icon"></span></div></div><ul class="xoxo blogroll"><li><a href="https://www.mkyong.com/" rel="noopener" target="_blank">Mkyong</a></li></ul><div class="clearfix"></div></div><div id="linkcat-5" class="container-wrapper widget widget_links"><div class="widget-title the-global-title"><div class="the-subtitle">The Code Geeks Network<span class="widget-title-icon tie-icon"></span></div></div><ul class="xoxo blogroll"><li><a href="//www.dotnetcodegeeks.com" rel="noopener" target="_blank">.NET Code Geeks</a></li><li><a href="//www.javacodegeeks.com" rel="noopener" target="_blank">Java Code Geeks</a></li><li><a href="//www.systemcodegeeks.com/" rel="noopener" target="_blank">System Code Geeks</a></li><li><a href="//www.webcodegeeks.com/" rel="noopener" target="_blank">Web Code Geeks</a></li></ul><div class="clearfix"></div></div></div><div class="tie-col-sm-3 normal-side"><div id="linkcat-652" class="container-wrapper widget widget_links"><div class="widget-title the-global-title"><div class="the-subtitle">Hall Of Fame<span class="widget-title-icon tie-icon"></span></div></div><ul class="xoxo blogroll"><li><a href="//www.javacodegeeks.com/2010/10/android-full-application-tutorial.html" rel="noopener" target="_blank">“Android Full Application Tutorial” series</a></li><li><a href="//www.javacodegeeks.com/2013/01/15-online-learning-websites-that-you-should-check-out.html" rel="noopener" target="_blank">11 Online Learning websites that you should check out</a></li><li><a href="//www.javacodegeeks.com/2013/04/advantages-and-disadvantages-of-cloud-computing-cloud-computing-pros-and-cons.html" rel="noopener" target="_blank">Advantages and Disadvantages of Cloud Computing – Cloud computing pros and cons</a></li><li><a href="//www.javacodegeeks.com/2011/02/android-google-maps-tutorial.html" rel="noopener" target="_blank">Android Google Maps Tutorial</a></li><li><a href="//www.javacodegeeks.com/2011/01/android-json-parsing-gson-tutorial.html" rel="noopener" target="_blank">Android JSON Parsing with Gson Tutorial</a></li><li><a href="//www.javacodegeeks.com/2010/09/android-location-based-services.html" rel="noopener" target="_blank">Android Location Based Services Application – GPS location</a></li><li><a href="//www.javacodegeeks.com/2011/01/android-quick-preferences-tutorial.html" rel="noopener" target="_blank">Android Quick Preferences Tutorial</a></li><li><a href="//www.javacodegeeks.com/2013/03/difference-between-comparator-and-comparable-in-java.html" rel="noopener" target="_blank">Difference between Comparator and Comparable in Java</a></li><li><a href="//www.javacodegeeks.com/2010/05/gwt-2-spring-3-jpa-2-hibernate-35-2.html" rel="noopener" target="_blank">GWT 2 Spring 3 JPA 2 Hibernate 3.5 Tutorial</a></li><li><a href="//www.javacodegeeks.com/2010/08/java-best-practices-vector-arraylist.html" rel="noopener" target="_blank">Java Best Practices – Vector vs ArrayList vs HashSet</a></li></ul><div class="clearfix"></div></div></div><div class="tie-col-sm-6 normal-side"><div id="text-html-widget-7" class="container-wrapper widget text-html"><div class="widget-title the-global-title"><div class="the-subtitle">About Java Code Geeks<span class="widget-title-icon tie-icon"></span></div></div><div>JCGs (Java Code Geeks) is an independent online community focused on creating the ultimate Java to Java developers resource center; targeted at the technical architect, technical team lead (senior developer), project manager and junior developers alike. JCGs serve the Java, SOA, Agile and Telecom communities with daily news written by domain experts, articles, tutorials, reviews, announcements, code snippets and open source projects.</div><div class="clearfix"></div></div><div id="text-html-widget-8" class="container-wrapper widget text-html"><div class="widget-title the-global-title"><div class="the-subtitle">Disclaimer<span class="widget-title-icon tie-icon"></span></div></div><div>All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners. Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries. Examples Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.</div><div class="clearfix"></div></div></div></div></div></div></div><div id="site-info" class="site-info site-info-layout-2"><div class="container"><div class="tie-row"><div class="tie-col-md-12"><div class="copyright-text copyright-text-first">Java Code Geeks and all content copyright © 2010-2025,  <a href="//www.exelixismedia.com/">Exelixis Media P.C.</a> | <a href="//www.javacodegeeks.com/about/terms-of-use">Terms of Use</a> | <a href="//www.javacodegeeks.com/about/privacy-policy">Privacy Policy</a> | <a href="mailto:support@javacodegeeks.com">Contact</a><div id="ccpa" style="cursor: pointer; display: none; float: right;"> | Do not share my Personal Information</div></div><ul class="social-icons"><li class="social-icons-item"><a class="social-link rss-social-icon" rel="external noopener nofollow" target="_blank" href="https://feeds.feedburner.com/JavaCodeGeeks"><span class="tie-social-icon tie-icon-feed"></span><span class="screen-reader-text">RSS</span></a></li><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/javacodegeeks"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li><li class="social-icons-item"><a class="social-link twitter-social-icon" rel="external noopener nofollow" target="_blank" href="https://twitter.com/javacodegeeks"><span class="tie-social-icon tie-icon-twitter"></span><span class="screen-reader-text">X</span></a></li><li class="social-icons-item"><a class="social-link linkedin-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.linkedin.com/groups/3810709/"><span class="tie-social-icon tie-icon-linkedin"></span><span class="screen-reader-text">LinkedIn</span></a></li><li class="social-icons-item"><a class="social-link youtube-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.youtube.com/channel/UCxoUc7Rar2q90Gu0nT2ffuQ"><span class="tie-social-icon tie-icon-youtube"></span><span class="screen-reader-text">YouTube</span></a></li><li class="social-icons-item"><a class="social-link github-social-icon" rel="external noopener nofollow" target="_blank" href="https://github.com/javacodegeeks/"><span class="tie-social-icon tie-icon-github"></span><span class="screen-reader-text">GitHub</span></a></li></ul></div></div></div></div></footer><div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"><div class="share-links  icons-only">
<a href="https://www.facebook.com/sharer.php?u=https://www.javacodegeeks.com/2020/02/how-webdriverio-uses-selenium-locators-in-a-unique-way-a-webdriverio-tutorial-with-examples.html" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}">
<span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span>
</a>
<a href="https://twitter.com/intent/tweet?text=How%20WebdriverIO%20Uses%20Selenium%20Locators%20in%20a%20Unique%20Way%20%E2%80%93%20A%20WebdriverIO%20Tutorial%20With%20Examples&url=https://www.javacodegeeks.com/2020/02/how-webdriverio-uses-selenium-locators-in-a-unique-way-a-webdriverio-tutorial-with-examples.html" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}">
<span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span>
</a>
<a href="https://api.whatsapp.com/send?text=How%20WebdriverIO%20Uses%20Selenium%20Locators%20in%20a%20Unique%20Way%20%E2%80%93%20A%20WebdriverIO%20Tutorial%20With%20Examples%20https://www.javacodegeeks.com/2020/02/how-webdriverio-uses-selenium-locators-in-a-unique-way-a-webdriverio-tutorial-with-examples.html" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}">
<span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span>
</a>
<a href="https://telegram.me/share/url?url=https://www.javacodegeeks.com/2020/02/how-webdriverio-uses-selenium-locators-in-a-unique-way-a-webdriverio-tutorial-with-examples.html&text=How%20WebdriverIO%20Uses%20Selenium%20Locators%20in%20a%20Unique%20Way%20%E2%80%93%20A%20WebdriverIO%20Tutorial%20With%20Examples" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}">
<span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span>
</a></div></div><div class="mobile-share-buttons-spacer"></div>
<a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body">
<span class="tie-icon-angle-up"></span>
<span class="screen-reader-text">Back to top button</span>
</a><aside class=" side-aside normal-side dark-skin dark-widgetized-area is-fullwidth appear-from-left" aria-label="Secondary Sidebar" style="visibility: hidden;"><div data-height="100%" class="side-aside-wrapper has-custom-scroll"><a href="#" class="close-side-aside remove big-btn">
<span class="screen-reader-text">Close</span>
</a><div id="mobile-container"><div id="mobile-search"><form role="search" method="get" class="search-form" action="https://www.javacodegeeks.com/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s">
</label>
<input type="submit" class="search-submit" value="Search"></form></div><div id="mobile-menu" class="hide-menu-icons"></div><div id="mobile-social-icons" class="social-icons-widget solid-social-icons"><ul><li class="social-icons-item"><a class="social-link rss-social-icon" rel="external noopener nofollow" target="_blank" href="https://feeds.feedburner.com/JavaCodeGeeks"><span class="tie-social-icon tie-icon-feed"></span><span class="screen-reader-text">RSS</span></a></li><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/javacodegeeks"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li><li class="social-icons-item"><a class="social-link twitter-social-icon" rel="external noopener nofollow" target="_blank" href="https://twitter.com/javacodegeeks"><span class="tie-social-icon tie-icon-twitter"></span><span class="screen-reader-text">X</span></a></li><li class="social-icons-item"><a class="social-link linkedin-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.linkedin.com/groups/3810709/"><span class="tie-social-icon tie-icon-linkedin"></span><span class="screen-reader-text">LinkedIn</span></a></li><li class="social-icons-item"><a class="social-link youtube-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.youtube.com/channel/UCxoUc7Rar2q90Gu0nT2ffuQ"><span class="tie-social-icon tie-icon-youtube"></span><span class="screen-reader-text">YouTube</span></a></li><li class="social-icons-item"><a class="social-link github-social-icon" rel="external noopener nofollow" target="_blank" href="https://github.com/javacodegeeks/"><span class="tie-social-icon tie-icon-github"></span><span class="screen-reader-text">GitHub</span></a></li></ul></div></div></div></aside><span id="wpdUserContentInfoAnchor" style="display:none;" rel="#wpdUserContentInfo" data-wpd-lity="">wpDiscuz</span><div id="wpdUserContentInfo" style="overflow:auto;background:#FDFDF6;padding:20px;width:600px;max-width:100%;border-radius:6px;" class="lity-hide"></div><div id="wpd-editor-source-code-wrapper-bg"></div><div id="wpd-editor-source-code-wrapper"><textarea id="wpd-editor-source-code"></textarea><button id="wpd-insert-source-code">Insert</button><input type="hidden" id="wpd-editor-uid"></div><div id="adngin-JavaCodeGeeks_NVU-0" style="width: 1px; height: 1px;"></div><div id="adngin-notifbar1-0" style="width:970px; margin-left: auto; margin-right: auto;"></div><div id="reading-position-indicator"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div><div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;">
<a href="#" class="tie-btn-close remove big-btn light-btn">
<span class="screen-reader-text">Close</span>
</a><div class="popup-search-wrap-inner"><div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Search"><form method="get" class="tie-popup-search-form" action="https://www.javacodegeeks.com/">
<input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="Search for" autocomplete="off" placeholder="Search for">
<button class="tie-popup-search-submit" type="submit">
<span class="tie-icon-search tie-search-icon" aria-hidden="true"></span>
<span class="screen-reader-text">Search for</span>
</button></form></div></div></div> <script type="speculationrules">{"prerender":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/jannah\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prerender"}}]},"eagerness":"moderate"}]}</script> <script type="text/javascript" id="wpdiscuz-combo-js-js-extra">/*  */
var wpdiscuzAjaxObj = {"wc_hide_replies_text":"Hide Replies","wc_show_replies_text":"View Replies","wc_msg_required_fields":"Please fill out required fields","wc_invalid_field":"Some of field value is invalid","wc_error_empty_text":"please fill out this field to comment","wc_error_url_text":"url is invalid","wc_error_email_text":"email address is invalid","wc_invalid_captcha":"Invalid Captcha Code","wc_login_to_vote":"You Must Be Logged In To Vote","wc_deny_voting_from_same_ip":"You are not allowed to vote for this comment","wc_self_vote":"You cannot vote for your comment","wc_vote_only_one_time":"You've already voted for this comment","wc_voting_error":"Voting Error","wc_banned_user":"You are banned","wc_comment_edit_not_possible":"Sorry, this comment is no longer possible to edit","wc_comment_not_updated":"Sorry, the comment was not updated","wc_comment_not_edited":"You've not made any changes","wc_msg_input_min_length":"Input is too short","wc_msg_input_max_length":"Input is too long","wc_spoiler_title":"Spoiler Title","wc_cannot_rate_again":"You cannot rate again","wc_not_allowed_to_rate":"You're not allowed to rate here","wc_confirm_rate_edit":"Are you sure you want to edit your rate?","wc_follow_user":"Follow this user","wc_unfollow_user":"Unfollow this user","wc_follow_success":"You started following this comment author","wc_follow_canceled":"You stopped following this comment author.","wc_follow_email_confirm":"Please check your email and confirm the user following request.","wc_follow_email_confirm_fail":"Sorry, we couldn't send confirmation email.","wc_follow_login_to_follow":"Please login to follow users.","wc_follow_impossible":"We are sorry, but you can't follow this user.","wc_follow_not_added":"Following failed. Please try again later.","is_user_logged_in":"","commentListLoadType":"0","commentListUpdateType":"0","commentListUpdateTimer":"30","liveUpdateGuests":"0","wordpressThreadCommentsDepth":"5","wordpressIsPaginate":"","commentTextMaxLength":"0","replyTextMaxLength":"0","commentTextMinLength":"1","replyTextMinLength":"1","storeCommenterData":"100000","socialLoginAgreementCheckbox":"0","enableFbLogin":"0","fbUseOAuth2":"0","enableFbShare":"0","facebookAppID":"","facebookUseOAuth2":"0","enableGoogleLogin":"0","googleClientID":"","googleClientSecret":"","cookiehash":"4ca58a12718339e5d09b349278a3aac0","isLoadOnlyParentComments":"0","scrollToComment":"1","commentFormView":"collapsed","enableDropAnimation":"0","isNativeAjaxEnabled":"1","userInteractionCheck":"1","enableBubble":"0","bubbleLiveUpdate":"0","bubbleHintTimeout":"45","bubbleHintHideTimeout":"1","cookieHideBubbleHint":"wpdiscuz_hide_bubble_hint","bubbleHintShowOnce":"1","bubbleHintCookieExpires":"7","bubbleShowNewCommentMessage":"0","bubbleLocation":"content_left","firstLoadWithAjax":"0","wc_copied_to_clipboard":"Copied to clipboard!","inlineFeedbackAttractionType":"blink","loadRichEditor":"1","wpDiscuzReCaptchaSK":"","wpDiscuzReCaptchaTheme":"light","wpDiscuzReCaptchaVersion":"2.0","wc_captcha_show_for_guest":"0","wc_captcha_show_for_members":"0","wpDiscuzIsShowOnSubscribeForm":"0","wmuEnabled":"1","wmuInput":"wmu_files","wmuMaxFileCount":"1","wmuMaxFileSize":"2097152","wmuPostMaxSize":"536870912","wmuIsLightbox":"1","wmuMimeTypes":{"jpg":"image\/jpeg","jpeg":"image\/jpeg","jpe":"image\/jpeg","gif":"image\/gif","png":"image\/png","bmp":"image\/bmp","tiff":"image\/tiff","tif":"image\/tiff","ico":"image\/x-icon"},"wmuPhraseConfirmDelete":"Are you sure you want to delete this attachment?","wmuPhraseNotAllowedFile":"Not allowed file type","wmuPhraseMaxFileCount":"Maximum number of uploaded files is 1","wmuPhraseMaxFileSize":"Maximum upload file size is 2MB","wmuPhrasePostMaxSize":"Maximum post size is 512MB","wmuPhraseDoingUpload":"Uploading in progress! Please wait.","msgEmptyFile":"File is empty. Please upload something more substantial. This error could also be caused by uploads being disabled in your php.ini or by post_max_size being defined as smaller than upload_max_filesize in php.ini.","msgPostIdNotExists":"Post ID not exists","msgUploadingNotAllowed":"Sorry, uploading not allowed for this post","msgPermissionDenied":"You do not have sufficient permissions to perform this action","wmuKeyImages":"images","wmuSingleImageWidth":"auto","wmuSingleImageHeight":"200","previewTemplate":"<div class=\"wmu-preview [PREVIEW_TYPE_CLASS]\" title=\"[PREVIEW_TITLE]\" data-wmu-type=\"[PREVIEW_TYPE]\" data-wmu-attachment=\"[PREVIEW_ID]\">\r\n    <div class=\"wmu-preview-remove\">\r\n        <img class=\"wmu-preview-img\" src=\"[PREVIEW_ICON]\">\r\n        <div class=\"wmu-file-name\">[PREVIEW_FILENAME]<\/div>\r\n<!--        <div class=\"wmu-delete\">\u00a0<\/div>-->\r\n    <\/div>\r\n<\/div>\r\n","isUserRated":"0","version":"7.6.28","wc_post_id":"101740","isCookiesEnabled":"1","loadLastCommentId":"0","dataFilterCallbacks":[],"phraseFilters":[],"scrollSize":"32","is_email_field_required":"1","url":"https:\/\/www.javacodegeeks.com\/wp-admin\/admin-ajax.php","customAjaxUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/plugins\/wpdiscuz\/utils\/ajax\/wpdiscuz-ajax.php","bubbleUpdateUrl":"https:\/\/www.javacodegeeks.com\/wp-json\/wpdiscuz\/v1\/update","restNonce":"29bf12a541","is_rate_editable":"0","menu_icon":"https:\/\/www.javacodegeeks.com\/wp-content\/plugins\/wpdiscuz\/assets\/img\/plugin-icon\/wpdiscuz-svg.svg","menu_icon_hover":"https:\/\/www.javacodegeeks.com\/wp-content\/plugins\/wpdiscuz\/assets\/img\/plugin-icon\/wpdiscuz-svg_hover.svg"};
var wpdiscuzUCObj = {"msgConfirmDeleteComment":"Are you sure you want to delete this comment?","msgConfirmCancelSubscription":"Are you sure you want to cancel this subscription?","msgConfirmCancelFollow":"Are you sure you want to cancel this follow?","additionalTab":"0"};
/*  */</script> <script type="text/javascript" id="wpdiscuz-combo-js-js-before" src="data:text/javascript;base64,dmFyIHdwZGlzY3V6RWRpdG9yT3B0aW9ucz17bW9kdWxlczp7dG9vbGJhcjoiIixjb3VudGVyOnt1bmlxdWVJRDoiIixjb21tZW50bWF4Y291bnQ6MCxyZXBseW1heGNvdW50OjAsY29tbWVudG1pbmNvdW50OjEscmVwbHltaW5jb3VudDoxLH0sfSx3Y19iZV90aGVfZmlyc3RfdGV4dDoiQmUgdGhlIEZpcnN0IHRvIENvbW1lbnQhIix3Y19jb21tZW50X2pvaW5fdGV4dDoiSm9pbiB0aGUgZGlzY3Vzc2lvbiIsdGhlbWU6J3Nub3cnLGRlYnVnOidlcnJvcid9" defer=""></script> <script type="text/javascript" id="tie-scripts-js-extra" src="data:text/javascript;base64,dmFyIHRpZT17ImlzX3J0bCI6IiIsImFqYXh1cmwiOiJodHRwczpcL1wvd3d3LmphdmFjb2RlZ2Vla3MuY29tXC93cC1hZG1pblwvYWRtaW4tYWpheC5waHAiLCJpc19zaWRlX2FzaWRlX2xpZ2h0IjoiIiwiaXNfdGFxeWVlbV9hY3RpdmUiOiIiLCJpc19zdGlja3lfdmlkZW8iOiIxIiwibW9iaWxlX21lbnVfdG9wIjoiIiwibW9iaWxlX21lbnVfYWN0aXZlIjoiYXJlYV8xIiwibW9iaWxlX21lbnVfcGFyZW50IjoiIiwibGlnaHRib3hfYWxsIjoidHJ1ZSIsImxpZ2h0Ym94X2dhbGxlcnkiOiJ0cnVlIiwibGlnaHRib3hfc2tpbiI6ImRhcmsiLCJsaWdodGJveF90aHVtYiI6Imhvcml6b250YWwiLCJsaWdodGJveF9hcnJvd3MiOiJ0cnVlIiwiaXNfc2luZ3VsYXIiOiIxIiwiYXV0b2xvYWRfcG9zdHMiOiIiLCJyZWFkaW5nX2luZGljYXRvciI6InRydWUiLCJsYXp5bG9hZCI6IiIsInNlbGVjdF9zaGFyZSI6IiIsInNlbGVjdF9zaGFyZV90d2l0dGVyIjoiIiwic2VsZWN0X3NoYXJlX2ZhY2Vib29rIjoiIiwic2VsZWN0X3NoYXJlX2xpbmtlZGluIjoiIiwic2VsZWN0X3NoYXJlX2VtYWlsIjoiIiwiZmFjZWJvb2tfYXBwX2lkIjoiNTMwMzIwMjk4MSIsInR3aXR0ZXJfdXNlcm5hbWUiOiIiLCJyZXNwb25zaXZlX3RhYmxlcyI6InRydWUiLCJhZF9ibG9ja2VyX2RldGVjdG9yIjoiIiwic3RpY2t5X2JlaGF2aW9yIjoiZGVmYXVsdCIsInN0aWNreV9kZXNrdG9wIjoiIiwic3RpY2t5X21vYmlsZSI6InRydWUiLCJzdGlja3lfbW9iaWxlX2JlaGF2aW9yIjoiZGVmYXVsdCIsImFqYXhfbG9hZGVyIjoiPGRpdiBjbGFzcz1cImxvYWRlci1vdmVybGF5XCI+PGRpdiBjbGFzcz1cInNwaW5uZXItY2lyY2xlXCI+PFwvZGl2PjxcL2Rpdj4iLCJ0eXBlX3RvX3NlYXJjaCI6IiIsImxhbmdfbm9fcmVzdWx0cyI6Ik5vdGhpbmcgRm91bmQiLCJzdGlja3lfc2hhcmVfbW9iaWxlIjoidHJ1ZSIsInN0aWNreV9zaGFyZV9wb3N0IjoiIiwic3RpY2t5X3NoYXJlX3Bvc3RfbWVudSI6IiJ9" defer=""></script> <script type="text/javascript" id="tie-scripts-js-after" src="data:text/javascript;base64,alF1ZXJ5LmFqYXgoe3R5cGU6IkdFVCIsdXJsOiJodHRwczovL3d3dy5qYXZhY29kZWdlZWtzLmNvbS93cC1hZG1pbi9hZG1pbi1hamF4LnBocCIsZGF0YToicG9zdHZpZXdzX2lkPTEwMTc0MCZhY3Rpb249dGllX3Bvc3R2aWV3cyIsY2FjaGU6ITEsc3VjY2VzczpmdW5jdGlvbihkYXRhKXtqUXVlcnkoIi5zaW5nbGUtcG9zdC1tZXRhIikuZmluZCgiLm1ldGEtdmlld3MiKS5odG1sKGRhdGEpfX0p" defer=""></script> <script src="data:text/javascript;base64,dmFyIGxlcG9wdXBfYWpheF91cmw9Imh0dHBzOi8vd3d3LmphdmFjb2RlZ2Vla3MuY29tL3dwLWFkbWluL2FkbWluLWFqYXgucGhwIjt2YXIgbGVwb3B1cF9nYV90cmFja2luZz0ib24iO3ZhciBsZXBvcHVwX2FiZF9lbmFibGVkPSJvZmYiO3ZhciBsZXBvcHVwX2FzeW5jX2luaXQ9Im9uIjt2YXIgbGVwb3B1cF9wcmVsb2FkPSJvZmYiO3ZhciBsZXBvcHVwX292ZXJsYXlzPXsiSFIzcW5MSUxLUDFGc1Y2SyI6WyIzMyIsIm1pZGRsZS1jZW50ZXIiLCJvbiIsInJnYmEoMjUwLDI1MCwyNTAsMSkiLCJvZmYiLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIzNjAiXSwicHZPUU9qb01LSVlHTlBZdCI6WyIzNCIsImJvdHRvbS1jZW50ZXIiLCJvZmYiLCJyZ2JhKDUxLDUxLDUxLDAuOCkiLCJvZmYiLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sIlRXS2o4eDFnT0dCNDN2RnEiOlsiMzUiLCJib3R0b20tY2VudGVyIiwib2ZmIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMCJdLCJpOG9mYk8xUXFIYXVsdm52IjpbIjM2IiwiYm90dG9tLWNlbnRlciIsIm9mZiIsInJnYmEoNTEsNTEsNTEsMC44KSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwiN3R5U285MU9yTkhIR21UeCI6WyIzNyIsImJvdHRvbS1jZW50ZXIiLCJvZmYiLCJyZ2JhKDUxLDUxLDUxLDAuOCkiLCJvZmYiLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sIkpqWkRSb2lKRkV3VzdaSUsiOlsiMzgiLCJib3R0b20tY2VudGVyIiwib2ZmIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMCJdLCJHVllPc2luVEh3anRKYngyIjpbIjM5IiwiYm90dG9tLWNlbnRlciIsIm9mZiIsInJnYmEoNTEsNTEsNTEsMC44KSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwiV1ZKUkR2bDNMYlRQS1cxNCI6WyI0MCIsImJvdHRvbS1jZW50ZXIiLCJvZmYiLCJyZ2JhKDUxLDUxLDUxLDAuOCkiLCJvZmYiLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sImlPOE1qY0dLT2hWSFdLRnciOlsiNDEiLCJib3R0b20tY2VudGVyIiwib2ZmIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMCJdLCJiRGNnbVpkR084aVVlZzZsIjpbIjQyIiwiYm90dG9tLWNlbnRlciIsIm9mZiIsInJnYmEoNTEsNTEsNTEsMC44KSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwicUpQZjhobU16empkNTdXVyI6WyI0MyIsImJvdHRvbS1jZW50ZXIiLCJvZmYiLCJyZ2JhKDUxLDUxLDUxLDAuOCkiLCJvZmYiLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sImsyS2pYVElLMnRtVk5aaGgiOlsiNDQiLCJib3R0b20tY2VudGVyIiwib2ZmIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMCJdLCJsMTZOUHNIckZOU25hT3dIIjpbIjQ1IiwiYm90dG9tLWNlbnRlciIsIm9mZiIsInJnYmEoNTEsNTEsNTEsMC44KSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwiYnhwS3NhZmZpS1ByejhCWCI6WyI0NiIsImJvdHRvbS1jZW50ZXIiLCJvZmYiLCJyZ2JhKDUxLDUxLDUxLDAuOCkiLCJvZmYiLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sInRTd1NBaUZCaGN0VUdFc0ciOlsiNDciLCJib3R0b20tY2VudGVyIiwib2ZmIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMCJdLCJDWDJMTnYyQ3hjeTd5RnRFIjpbIjQ4IiwiYm90dG9tLWNlbnRlciIsIm9mZiIsInJnYmEoNTEsNTEsNTEsMC44KSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwiaVJGVHpXRU83THpaRXNpYyI6WyI0OSIsImJvdHRvbS1jZW50ZXIiLCJvZmYiLCJyZ2JhKDUxLDUxLDUxLDAuOCkiLCJvZmYiLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sInZpTnNpQVVSamFCc1ZMS2QiOlsiNTAiLCJib3R0b20tY2VudGVyIiwib2ZmIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMCJdLCJTTnJ2a3ZLQ1NKUENaRTllIjpbIjUxIiwiYm90dG9tLWNlbnRlciIsIm9mZiIsInJnYmEoNTEsNTEsNTEsMC44KSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwiUE9uMVB3VlRPdXNGQ0VLZCI6WyI1MiIsImJvdHRvbS1jZW50ZXIiLCJvZmYiLCJyZ2JhKDUxLDUxLDUxLDAuOCkiLCJvZmYiLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sInFwb1NRRDhxQkxwYVpGSHoiOlsiNTMiLCJib3R0b20tY2VudGVyIiwib2ZmIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMCJdLCJHdkhiaWJnT29QZXNyclZkIjpbIjU0IiwiYm90dG9tLWNlbnRlciIsIm9mZiIsInJnYmEoNTEsNTEsNTEsMC44KSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwiZGNzRllqNVFzdDZLWjFtViI6WyI1NSIsImJvdHRvbS1jZW50ZXIiLCJvZmYiLCJyZ2JhKDUxLDUxLDUxLDAuOCkiLCJvZmYiLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sImZ6ZHZBcE9XSXQ0NWozbk0iOlsiNTYiLCJib3R0b20tY2VudGVyIiwib2ZmIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMCJdLCJBcEp5a1NXTnBucUg1cXVxIjpbIjU3IiwiYm90dG9tLWNlbnRlciIsIm9mZiIsInJnYmEoNTEsNTEsNTEsMC44KSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwiRngzaE40Zk05M1h2eUsyTiI6WyI1OCIsImJvdHRvbS1jZW50ZXIiLCJvZmYiLCJyZ2JhKDUxLDUxLDUxLDAuOCkiLCJvZmYiLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sIjNPVUNCRnNaM0N5aDY5Y2ciOlsiNTkiLCJtaWRkbGUtcmlnaHQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIjdsUU02b3lXTDViVG01bHciOlsiNjAiLCJtaWRkbGUtcmlnaHQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sImJQZzNOTW9weThTT3dGeHYiOlsiNjEiLCJtaWRkbGUtcmlnaHQiLCJvZmYiLCJyZ2JhKDUxLDUxLDUxLDEpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMzYwIl0sInlhZ1NSeEdYY2VXT1hLZEwiOlsiNjIiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwibWM4eWsxMmVPV0I4NFlPeCI6WyI2MyIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJTZmlFWDUxR2c3WUo1Zjg3IjpbIjY0IiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIkpCR3BJdzdhNDVXNkVsU2QiOlsiNjUiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwiUjZDSUJxUXdFeVZIOHAzUCI6WyI2NiIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCI5SUo3Y0RJZkdCd1d2RW9yIjpbIjY5IiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIlFiRGRhMVdKTjVkR0x5em8iOlsiNzAiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwibEZLNGZNWmhwVUxxZVFVbCI6WyI3MSIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJKNmxzeEdIMXdtbFBiREJYIjpbIjcyIiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIkd6R1hlcmVDSjY2Q2tJZTciOlsiNzMiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwiS1VmVmYxbGE4QlRpOGdwciI6WyI3NCIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJvaUN0dTZ4M0F3cGFWTlBJIjpbIjc1IiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIlBPb29oSXdhaklmQWxReVUiOlsiNzYiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwialNPV29XSW5LSk9QZEhETCI6WyI3NyIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJNRDI1Um5QdUMydnJWSXRsIjpbIjc4IiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sImRqdThjTlE2VUpkeWsyVzciOlsiNzkiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwicXFwRml2NWE1VzM4NFdsZyI6WyI4MCIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJSeHlVS05LVDlISTh5ZTE4IjpbIjgxIiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sImM0cUd3cXoyelo3Q2VzWmQiOlsiODIiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwibHVIaXN1NlZQTDlNdDZJQiI6WyI4MyIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJTbVR6MUZ1Z3VOaGR4M0VMIjpbIjg0IiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIlV4ckpUUW9yUTYxa29SU1MiOlsiODUiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwiVzd6NlA0SktXaHFhblV5cSI6WyI4NiIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJMY3k4dUlMaGxIS2hoM09hIjpbIjg3IiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sInBQdE5IVFY4dlhlV1VBYmciOlsiODgiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwieDZzRkc2dVBuaVVkYUd4TSI6WyI4OSIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJldlVWb0dobU1UMmU3QnNlIjpbIjkwIiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIk1PU3ppTm1EWU1WTGNwQmQiOlsiOTEiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwibUxEc3p3WGx0bGFjaUZoTCI6WyI5MiIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJMb1F0R2w3U1hOcVNRWGprIjpbIjkzIiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIkVlbFc2U1VIQ1BmQUl0dTgiOlsiOTQiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwiZmlTTTdpdU93R0pTUzVIeCI6WyI5NSIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJ3NkY0VzRTQU1peVRhcEJGIjpbIjk2IiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIjdleVJ3VmxNRHl4ZzZQdHciOlsiOTciLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwiVFRndkhDSTJzUzFRaHBFWiI6WyI5OCIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJEYXg0b3VXYVp5TXo1d2V5IjpbIjk5IiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIjUyb1JYbkJZajVjTVNaUGUiOlsiMTAwIiwiYm90dG9tLWNlbnRlciIsIm9mZiIsInJnYmEoNTEsNTEsNTEsMC44KSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwibDNGb3Y5TmpTQnlZS2NlWiI6WyIxMDEiLCJtaWRkbGUtY2VudGVyIiwib24iLCJyZ2JhKDI1MCwyNTAsMjUwLDEpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMzYwIl0sImxHeThaYkd2TkszamtoNDQiOlsiMTAzIiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIk1rdGhDbTlsR0lxbFRFNGMiOlsiMTA0IiwiYm90dG9tLWNlbnRlciIsIm9mZiIsInJnYmEoNTEsNTEsNTEsMC44KSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwicmZuU3ppYWF0bXNjSW1maiI6WyIxMDYiLCJib3R0b20tY2VudGVyIiwib2ZmIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMCJdLCJMWXpZR2tKb2lxT2g5S2NwIjpbIjEwNyIsImJvdHRvbS1jZW50ZXIiLCJvZmYiLCJyZ2JhKDUxLDUxLDUxLDAuOCkiLCJvZmYiLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sInJpZXM1ZGNtTWdqSkh0WUIiOlsiMTA4IiwibWlkZGxlLWNlbnRlciIsIm9uIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib24iLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sIjluU3Z3d0g4VlZXdVdKQmYiOlsiMTExIiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIlVraFRROGZQeUs2bERMamsiOlsiMTEyIiwiYm90dG9tLWNlbnRlciIsIm9mZiIsInJnYmEoNTEsNTEsNTEsMC44KSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwiZGFlaVRzenJlYWFyRlcycCI6WyIxMTMiLCJib3R0b20tY2VudGVyIiwib2ZmIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib2ZmIiwiZmFkZUluIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiMCJdLCJ0U3pkWmVHcU5zeVBYZmw2IjpbIjExNCIsIm1pZGRsZS1jZW50ZXIiLCJvbiIsInJnYmEoNTEsIDUxLCA1MSwgMC44KSIsIm9uIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMCJdLCJKaUVlQnM1ZTdGV2NiTk56IjpbIjExNSIsIm1pZGRsZS1jZW50ZXIiLCJvbiIsInJnYmEoNTEsIDUxLCA1MSwgMC44KSIsIm9uIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMCJdLCJrbTVHdFd1eHVLRWNaeHdUIjpbIjExNiIsIm1pZGRsZS1jZW50ZXIiLCJvbiIsInJnYmEoNTEsIDUxLCA1MSwgMC44KSIsIm9uIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMCJdLCJKbERMYzg5REx6SVBwZHJuIjpbIjExNyIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJEZElOZ0Vxb09vdmdraGhrIjpbIjExOCIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJjWGpsSEk3Y0JKV3Vzb3FCIjpbIjExOSIsIm1pZGRsZS1yaWdodCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIwIl0sIldlWHZJUDJ4M2ZsU3E3QlYiOlsiMTIwIiwibWlkZGxlLWNlbnRlciIsIm9uIiwicmdiYSg1MSw1MSw1MSwwLjgpIiwib24iLCJmYWRlSW4iLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIiNGRkZGRkYiLCIwIl0sIkFNb2xpTWRsNG1yOUVUWFkiOlsiMTIxIiwibWlkZGxlLWNlbnRlciIsIm9uIiwicmdiYSgyNTAsMjUwLDI1MCwxKSIsIm9mZiIsImZhZGVJbiIsIiNGRkZGRkYiLCIjRkZGRkZGIiwiI0ZGRkZGRiIsIjAiXSwidTZuUTZxQW1NVU1kbEx6RiI6WyIxMjIiLCJtaWRkbGUtY2VudGVyIiwib24iLCJyZ2JhKDUxLCA1MSwgNTEsIDAuOCkiLCJvbiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJwSHpCRUtvYjdOQU41Tm95IjpbIjEyMyIsIm1pZGRsZS1jZW50ZXIiLCJvbiIsInJnYmEoNTEsIDUxLCA1MSwgMC44KSIsIm9uIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMCJdLCJUNjhYcUl3WFc1aEpveXNpIjpbIjEyNCIsIm1pZGRsZS1jZW50ZXIiLCJvbiIsInJnYmEoNTEsIDUxLCA1MSwgMC44KSIsIm9uIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMCJdLCJwak5hWGRETnVBc2Y5dkk1IjpbIjEyNSIsIm1pZGRsZS1jZW50ZXIiLCJvbiIsInJnYmEoNTEsIDUxLCA1MSwgMC44KSIsIm9uIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIldzYWdsc0J2eHFHVTZqcHYtMiI6WyIxMjciLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwiV3NhZ2xzQnZ4cUdVNmpwdi0zIjpbIjEyOCIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTQiOlsiMTI5IiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIldzYWdsc0J2eHFHVTZqcHYtNSI6WyIxMzAiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwiV3NhZ2xzQnZ4cUdVNmpwdi02IjpbIjEzMSIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTciOlsiMTMyIiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIldzYWdsc0J2eHFHVTZqcHYtOCI6WyIxMzMiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwiV3NhZ2xzQnZ4cUdVNmpwdi05IjpbIjEzNCIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTEwIjpbIjEzNSIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTExIjpbIjEzNiIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTEyIjpbIjEzNyIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTEzIjpbIjEzOCIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTE0IjpbIjEzOSIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTE1IjpbIjE0MCIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTE2IjpbIjE0MSIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTE3IjpbIjE0MiIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTE4IjpbIjE0MyIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTE5IjpbIjE0NSIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTIwIjpbIjE0NiIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTIxIjpbIjE0NyIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTIyIjpbIjE0OCIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTIzIjpbIjE0OSIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTI0IjpbIjE1MCIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJXc2FnbHNCdnhxR1U2anB2LTI1IjpbIjE1MSIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJLMkJCU3JxRXpWVHpMN3BjIjpbIjE1MiIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSgyNTUsIDI1NSwgMjU1LCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdLCJwb3B1cC0yMDIzLTExLTA4LTExLTIxLTExIjpbIjE1MyIsIm1pZGRsZS1jZW50ZXIiLCJvbiIsInJnYmEoMCwgMCwgMCwgMC43KSIsIm9uIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzY1Il0sIldzYWdsc0J2eHFHVTZqcHYtMjYiOlsiMTU0IiwibWlkZGxlLWxlZnQiLCJvZmYiLCJyZ2JhKDUxLCA1MSwgNTEsIDEpIiwib2ZmIiwiZmFkZUluIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiMzYwIl0sIkRkSU5nRXFvT292Z2toaGstMiI6WyIxNTUiLCJtaWRkbGUtbGVmdCIsIm9mZiIsInJnYmEoNTEsIDUxLCA1MSwgMSkiLCJvZmYiLCJmYWRlSW4iLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIiNmZmZmZmYiLCIzNjAiXSwiRGRJTmdFcW9Pb3Zna2hoay0zIjpbIjE1NiIsIm1pZGRsZS1sZWZ0Iiwib2ZmIiwicmdiYSg1MSwgNTEsIDUxLCAxKSIsIm9mZiIsImZhZGVJbiIsIiNmZmZmZmYiLCIjZmZmZmZmIiwiI2ZmZmZmZiIsIjM2MCJdfTt2YXIgbGVwb3B1cF9jYW1wYWlnbnM9eyJhYi1pNWYxbzg3U2JabzlDeEN2IjpbInB2T1FPam9NS0lZR05QWXQiLCJUV0tqOHgxZ09HQjQzdkZxIiwiaThvZmJPMVFxSGF1bHZudiIsIjd0eVNvOTFPck5ISEdtVHgiLCJKalpEUm9pSkZFd1c3WklLIiwiR1ZZT3NpblRId2p0SmJ4MiIsIldWSlJEdmwzTGJUUEtXMTQiLCJpTzhNamNHS09oVkhXS0Z3IiwiYkRjZ21aZEdPOGlVZWc2bCIsInFKUGY4aG1NenpqZDU3V1ciLCJrMktqWFRJSzJ0bVZOWmhoIiwibDE2TlBzSHJGTlNuYU93SCIsImJ4cEtzYWZmaUtQcno4QlgiLCJ0U3dTQWlGQmhjdFVHRXNHIiwiQ1gyTE52MkN4Y3k3eUZ0RSIsImlSRlR6V0VPN0x6WkVzaWMiLCJ2aU5zaUFVUmphQnNWTEtkIiwiU05ydmt2S0NTSlBDWkU5ZSIsIlBPbjFQd1ZUT3VzRkNFS2QiLCJxcG9TUUQ4cUJMcGFaRkh6IiwiR3ZIYmliZ09vUGVzcnJWZCIsImRjc0ZZajVRc3Q2S1oxbVYiLCJmemR2QXBPV0l0NDVqM25NIiwiQXBKeWtTV05wbnFINXF1cSIsIkZ4M2hONGZNOTNYdnlLMk4iLCI1Mm9SWG5CWWo1Y01TWlBlIiwiTWt0aENtOWxHSXFsVEU0YyIsIlVraFRROGZQeUs2bERMamsiXSwiYWItZlJBNEJaNjNkR1Q3Rjc5cSI6WyJyZm5TemlhYXRtc2NJbWZqIiwiTFl6WUdrSm9pcU9oOUtjcCIsImRhZWlUc3pyZWFhckZXMnAiXSwiYWItbnVia0RaeVZxMkRxWGJhNiI6WyJKaUVlQnM1ZTdGV2NiTk56Iiwia201R3RXdXh1S0VjWnh3VCJdLCJhYi0xWk5CemtYVnVNa2drUVBKIjpbInU2blE2cUFtTVVNZGxMekYiLCJwSHpCRUtvYjdOQU41Tm95IiwicGpOYVhkRE51QXNmOXZJNSJdfQ==" defer=""></script> <script type="text/javascript" src="https://www.javacodegeeks.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js" id="syntaxhighlighter-core-js" defer="" data-deferred="1"></script><script type="text/javascript" src="data:text/javascript;base64,U3ludGF4SGlnaGxpZ2h0ZXIuY29uZmlnLnN0cmluZ3MuZXhwYW5kU291cmNlPScrIGV4cGFuZCBzb3VyY2UnO1N5bnRheEhpZ2hsaWdodGVyLmNvbmZpZy5zdHJpbmdzLmhlbHA9Jz8nO1N5bnRheEhpZ2hsaWdodGVyLmNvbmZpZy5zdHJpbmdzLmFsZXJ0PSdTeW50YXhIaWdobGlnaHRlclxuXG4nO1N5bnRheEhpZ2hsaWdodGVyLmNvbmZpZy5zdHJpbmdzLm5vQnJ1c2g9J0NhbnQgZmluZCBicnVzaCBmb3I6ICc7U3ludGF4SGlnaGxpZ2h0ZXIuY29uZmlnLnN0cmluZ3MuYnJ1c2hOb3RIdG1sU2NyaXB0PSdCcnVzaCB3YXNudCBjb25maWd1cmVkIGZvciBodG1sLXNjcmlwdCBvcHRpb246ICc7U3ludGF4SGlnaGxpZ2h0ZXIuZGVmYXVsdHNbJ3BhZC1saW5lLW51bWJlcnMnXT0hMDtTeW50YXhIaWdobGlnaHRlci5kZWZhdWx0cy50b29sYmFyPSExO1N5bnRheEhpZ2hsaWdodGVyLmRlZmF1bHRzWyd3cmFwLWxpbmVzJ109ITE7U3ludGF4SGlnaGxpZ2h0ZXIuYWxsKCk7aWYodHlwZW9mKGpRdWVyeSkhPT0ndW5kZWZpbmVkJyl7alF1ZXJ5KGZ1bmN0aW9uKCQpeyQoZG9jdW1lbnQuYm9keSkub24oJ3Bvc3QtbG9hZCcsZnVuY3Rpb24oKXtTeW50YXhIaWdobGlnaHRlci5oaWdobGlnaHQoKX0pfSl9" defer=""></script><script type="text/javascript" src="https://www.javacodegeeks.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJScript.js" id="syntaxhighlighter-brush-js-js" defer="" data-deferred="1"></script><script type="text/javascript" src="https://www.javacodegeeks.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJava.js" id="syntaxhighlighter-brush-java-js" defer="" data-deferred="1"></script><script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" src="https://www.javacodegeeks.com/wp-content/litespeed/js/1cc386b4b5570bc27fb1c04d54f48e46.js?ver=c0474" defer=""></script>
<!-- Page optimized by LiteSpeed Cache @2025-03-08 11:47:52 -->
 
<!-- Page cached by LiteSpeed Cache 6.5.4 on 2025-03-08 11:47:52 --></object></div></fn>