From 0e01774aadeaa819b1e3fc9177c78847215cc07b Mon Sep 17 00:00:00 2001
From: aguspe <agustin.pe94@gmail.com>
Date: Sat, 22 Jun 2024 15:14:57 +0200
Subject: [PATCH] Move an update locators examples for ruby

---
 examples/ruby/spec/elements/locators_spec.rb  | 60 +++++++++++++-
 .../webdriver/elements/locators.en.md         | 78 +++++++++----------
 .../webdriver/elements/locators.ja.md         | 78 +++++++++----------
 .../webdriver/elements/locators.pt-br.md      | 78 +++++++++----------
 .../webdriver/elements/locators.zh-cn.md      | 78 +++++++++----------
 5 files changed, 198 insertions(+), 174 deletions(-)

diff --git a/examples/ruby/spec/elements/locators_spec.rb b/examples/ruby/spec/elements/locators_spec.rb
index 2882d196f988..99e1544d1a60 100644
--- a/examples/ruby/spec/elements/locators_spec.rb
+++ b/examples/ruby/spec/elements/locators_spec.rb
@@ -2,6 +2,62 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Element Locators' do
-  let(:driver) { start_session }
+RSpec.describe 'Element Locators', skip: 'These are reference following the documentation example' do
+  it 'finds element by class name' do
+    driver.find_element(class: 'information')
+  end
+
+  it 'finds element by css selector' do
+    driver.find_element(css: '#fname')
+  end
+
+  it 'finds element by id' do
+    driver.find_element(id: 'lname')
+  end
+
+  it 'find element by name' do
+    driver.find_element(name: 'newsletter')
+  end
+
+  it 'finds element by link text' do
+    driver.find_element(link_text: 'Selenium Official Page')
+  end
+
+  it 'finds element by partial link text' do
+    driver.find_element(partial_link_text: 'Official Page')
+  end
+
+  it 'finds element by tag name' do
+    driver.find_element(tag_name: 'a')
+  end
+
+  it 'finds element by xpath' do
+    driver.find_element(xpath: "//input[@value='f']")
+  end
+
+  context 'with relative locators' do
+    it 'finds element above' do
+      driver.find_element({relative: {tag_name: 'input', above: {id: 'password'}}})
+    end
+
+    it 'finds element below' do
+      driver.find_element({relative: {tag_name: 'input', below: {id: 'email'}}})
+    end
+
+    it 'finds element to the left' do
+      driver.find_element({relative: {tag_name: 'button', left: {id: 'submit'}}})
+    end
+
+    it 'finds element to the right' do
+      driver.find_element({relative: {tag_name: 'button', right: {id: 'cancel'}}})
+    end
+
+    it 'finds near element' do
+      driver.find_element({relative: {tag_name: 'input', near: {id: 'lbl-email'}}})
+    end
+
+    it 'chains relative locators' do
+      driver.find_element({relative: {tag_name: 'button', below: {id: 'email'}, right: {id: 'cancel'}}})
+    end
+  end
 end
diff --git a/website_and_docs/content/documentation/webdriver/elements/locators.en.md b/website_and_docs/content/documentation/webdriver/elements/locators.en.md
index 78bf8cc1f179..3765f88dbc02 100644
--- a/website_and_docs/content/documentation/webdriver/elements/locators.en.md
+++ b/website_and_docs/content/documentation/webdriver/elements/locators.en.md
@@ -88,9 +88,8 @@ available in Selenium.
     var driver = new ChromeDriver();
 	driver.FindElement(By.ClassName("information"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(class: 'information')
+  {{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}}
   {{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
@@ -123,10 +122,9 @@ textbox, using css.
     var driver = new ChromeDriver();
 	driver.FindElement(By.CssSelector("#fname"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(css: '#fname')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L11" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.css('#fname'));
@@ -156,10 +154,9 @@ We will identify the Last Name field using it.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Id("lname"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(id: 'lname')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L15" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.id('lname'));
@@ -190,10 +187,9 @@ We will identify the Newsletter checkbox using it.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Name("newsletter"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(name: 'newsletter')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L19" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.name('newsletter'));
@@ -222,10 +218,9 @@ In the HTML snippet shared, we have a link available, let's see how will we loca
     var driver = new ChromeDriver();
 	driver.FindElement(By.LinkText("Selenium Official Page"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(link_text: 'Selenium Official Page')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L23" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.linkText('Selenium Official Page'));
@@ -255,10 +250,9 @@ In the HTML snippet shared, we have a link available, lets see how will we locat
     var driver = new ChromeDriver();
 	driver.FindElement(By.PartialLinkText("Official Page"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(partial_link_text: 'Official Page')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L27" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.partialLinkText('Official Page'));
@@ -286,10 +280,9 @@ From the above HTML snippet shared, lets identify the link, using its html tag "
     var driver = new ChromeDriver();
 	driver.FindElement(By.TagName("a"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(tag_name: 'a')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L31" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.tagName('a'));
@@ -323,10 +316,9 @@ first name text box. Let us create locator for female radio button using xpath.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Xpath("//input[@value='f']"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(xpath: '//input[@value='f']')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L35" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.xpath('//input[@value='f']'));
@@ -377,8 +369,8 @@ email_locator = locate_with(By.TAG_NAME, "input").above({By.ID: "password"})
 {{< tab header="CSharp" >}}
 var emailLocator = RelativeBy.WithLocator(By.TagName("input")).Above(By.Id("password"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-email_locator = {relative: {tag_name: 'input', above: {id: 'password'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L40" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let emailLocator = locateWith(By.tagName('input')).above(By.id('password'));
@@ -404,8 +396,8 @@ password_locator = locate_with(By.TAG_NAME, "input").below({By.ID: "email"})
 {{< tab header="CSharp" >}}
 var passwordLocator = RelativeBy.WithLocator(By.TagName("input")).Below(By.Id("email"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-password_locator = {relative: {tag_name: 'input', below: {id: 'email'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L44" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let passwordLocator = locateWith(By.tagName('input')).below(By.id('email'));
@@ -431,8 +423,8 @@ cancel_locator = locate_with(By.TAG_NAME, "button").to_left_of({By.ID: "submit"}
 {{< tab header="CSharp" >}}
 var cancelLocator = RelativeBy.WithLocator(By.tagName("button")).LeftOf(By.Id("submit"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-cancel_locator = {relative: {tag_name: 'button', left: {id: 'submit'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L48" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let cancelLocator = locateWith(By.tagName('button')).toLeftOf(By.id('submit'));
@@ -458,8 +450,8 @@ submit_locator = locate_with(By.TAG_NAME, "button").to_right_of({By.ID: "cancel"
 {{< tab header="CSharp" >}}
 var submitLocator = RelativeBy.WithLocator(By.tagName("button")).RightOf(By.Id("cancel"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-submit_locator = {relative: {tag_name: 'button', right: {id: 'cancel'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L52" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let submitLocator = locateWith(By.tagName('button')).toRightOf(By.id('cancel'));
@@ -487,8 +479,8 @@ email_locator = locate_with(By.TAG_NAME, "input").near({By.ID: "lbl-email"})
 {{< tab header="CSharp" >}}
 var emailLocator = RelativeBy.WithLocator(By.tagName("input")).Near(By.Id("lbl-email"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-email_locator = {relative: {tag_name: 'input', near: {id: 'lbl-email'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L56" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let emailLocator = locateWith(By.tagName('input')).near(By.id('lbl-email'));
@@ -513,8 +505,8 @@ submit_locator = locate_with(By.TAG_NAME, "button").below({By.ID: "email"}).to_r
 {{< tab header="CSharp" >}}
 var submitLocator = RelativeBy.WithLocator(By.tagName("button")).Below(By.Id("email")).RightOf(By.Id("cancel"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-submit_locator = {relative: {tag_name: 'button', below: {id: 'email'}, right: {id: 'cancel'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L60" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let submitLocator = locateWith(By.tagName('button')).below(By.id('email')).toRightOf(By.id('cancel'));
diff --git a/website_and_docs/content/documentation/webdriver/elements/locators.ja.md b/website_and_docs/content/documentation/webdriver/elements/locators.ja.md
index 9444c1000e05..41541e1c4beb 100644
--- a/website_and_docs/content/documentation/webdriver/elements/locators.ja.md
+++ b/website_and_docs/content/documentation/webdriver/elements/locators.ja.md
@@ -86,9 +86,8 @@ available in Selenium.
     var driver = new ChromeDriver();
 	driver.FindElement(By.ClassName("information"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(class: 'information')
+  {{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}}
   {{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
@@ -120,10 +119,9 @@ textbox, using css.
     var driver = new ChromeDriver();
 	driver.FindElement(By.CssSelector("#fname"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(css: '#fname')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L11" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.css('#fname'));
@@ -152,10 +150,9 @@ We will identify the Last Name field using it.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Id("lname"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(id: 'lname')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L15" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.id('lname'));
@@ -185,10 +182,9 @@ We will identify the Newsletter checkbox using it.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Name("newsletter"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(name: 'newsletter')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L19" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.name('newsletter'));
@@ -216,10 +212,9 @@ In the HTML snippet shared, we have a link available, lets see how will we locat
     var driver = new ChromeDriver();
 	driver.FindElement(By.LinkText("Selenium Official Page"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(link_text: 'Selenium Official Page')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L23" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.linkText('Selenium Official Page'));
@@ -248,10 +243,9 @@ In the HTML snippet shared, we have a link available, lets see how will we locat
     var driver = new ChromeDriver();
 	driver.FindElement(By.PartialLinkText("Official Page"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(partial_link_text: 'Official Page')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L27" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.partialLinkText('Official Page'));
@@ -278,10 +272,9 @@ From the above HTML snippet shared, lets identify the link, using its html tag "
     var driver = new ChromeDriver();
 	driver.FindElement(By.TagName("a"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(tag_name: 'a')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L31" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.tagName('a'));
@@ -314,10 +307,9 @@ first name text box. Let us create locator for female radio button using xpath.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Xpath("//input[@value='f']"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(xpath: '//input[@value='f']')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L35" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.xpath('//input[@value='f']'));
@@ -369,8 +361,8 @@ email_locator = locate_with(By.TAG_NAME, "input").above({By.ID: "password"})
 {{< tab header="CSharp" >}}
 var emailLocator = RelativeBy.WithLocator(By.TagName("input")).Above(By.Id("password"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-email_locator = {relative: {tag_name: 'input', above: {id: 'password'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L40" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let emailLocator = locateWith(By.tagName('input')).above(By.id('password'));
@@ -395,8 +387,8 @@ password_locator = locate_with(By.TAG_NAME, "input").below({By.ID: "email"})
 {{< tab header="CSharp" >}}
 var passwordLocator = RelativeBy.WithLocator(By.TagName("input")).Below(By.Id("email"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-password_locator = {relative: {tag_name: 'input', below: {id: 'email'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L44" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let passwordLocator = locateWith(By.tagName('input')).below(By.id('email'));
@@ -421,8 +413,8 @@ cancel_locator = locate_with(By.TAG_NAME, "button").to_left_of({By.ID: "submit"}
 {{< tab header="CSharp" >}}
 var cancelLocator = RelativeBy.WithLocator(By.tagName("button")).LeftOf(By.Id("submit"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-cancel_locator = {relative: {tag_name: 'button', left: {id: 'submit'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L48" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let cancelLocator = locateWith(By.tagName('button')).toLeftOf(By.id('submit'));
@@ -447,8 +439,8 @@ submit_locator = locate_with(By.TAG_NAME, "button").to_right_of({By.ID: "cancel"
 {{< tab header="CSharp" >}}
 var submitLocator = RelativeBy.WithLocator(By.tagName("button")).RightOf(By.Id("cancel"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-submit_locator = {relative: {tag_name: 'button', right: {id: 'cancel'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L52" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let submitLocator = locateWith(By.tagName('button')).toRightOf(By.id('cancel'));
@@ -475,8 +467,8 @@ email_locator = locate_with(By.TAG_NAME, "input").near({By.ID: "lbl-email"})
 {{< tab header="CSharp" >}}
 var emailLocator = RelativeBy.WithLocator(By.tagName("input")).Near(By.Id("lbl-email"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-email_locator = {relative: {tag_name: 'input', near: {id: 'lbl-email'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L56" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let emailLocator = locateWith(By.tagName('input')).near(By.id('lbl-email'));
@@ -500,8 +492,8 @@ submit_locator = locate_with(By.TAG_NAME, "button").below({By.ID: "email"}).to_r
 {{< tab header="CSharp" >}}
 var submitLocator = RelativeBy.WithLocator(By.tagName("button")).Below(By.Id("email")).RightOf(By.Id("cancel"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-submit_locator = {relative: {tag_name: 'button', below: {id: 'email'}, right: {id: 'cancel'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L60" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let submitLocator = locateWith(By.tagName('button')).below(By.id('email')).toRightOf(By.id('cancel'));
diff --git a/website_and_docs/content/documentation/webdriver/elements/locators.pt-br.md b/website_and_docs/content/documentation/webdriver/elements/locators.pt-br.md
index 293bcdd00615..21f710a4fd5f 100644
--- a/website_and_docs/content/documentation/webdriver/elements/locators.pt-br.md
+++ b/website_and_docs/content/documentation/webdriver/elements/locators.pt-br.md
@@ -89,9 +89,8 @@ available in Selenium.
     var driver = new ChromeDriver();
 	driver.FindElement(By.ClassName("information"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(class: 'information')
+  {{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}}
   {{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
@@ -123,10 +122,9 @@ textbox, using css.
     var driver = new ChromeDriver();
 	driver.FindElement(By.CssSelector("#fname"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(css: '#fname')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L11" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.css('#fname'));
@@ -155,10 +153,9 @@ We will identify the Last Name field using it.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Id("lname"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(id: 'lname')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L15" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.id('lname'));
@@ -188,10 +185,9 @@ We will identify the Newsletter checkbox using it.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Name("newsletter"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(name: 'newsletter')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L19" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.name('newsletter'));
@@ -219,10 +215,9 @@ In the HTML snippet shared, we have a link available, lets see how will we locat
     var driver = new ChromeDriver();
 	driver.FindElement(By.LinkText("Selenium Official Page"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(link_text: 'Selenium Official Page')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L23" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.linkText('Selenium Official Page'));
@@ -251,10 +246,9 @@ In the HTML snippet shared, we have a link available, lets see how will we locat
     var driver = new ChromeDriver();
 	driver.FindElement(By.PartialLinkText("Official Page"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(partial_link_text: 'Official Page')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L27" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.partialLinkText('Official Page'));
@@ -281,10 +275,9 @@ From the above HTML snippet shared, lets identify the link, using its html tag "
     var driver = new ChromeDriver();
 	driver.FindElement(By.TagName("a"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(tag_name: 'a')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L31" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.tagName('a'));
@@ -317,10 +310,9 @@ first name text box. Let us create locator for female radio button using xpath.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Xpath("//input[@value='f']"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(xpath: '//input[@value='f']')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L35" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.xpath('//input[@value='f']'));
@@ -372,8 +364,8 @@ email_locator = locate_with(By.TAG_NAME, "input").above({By.ID: "password"})
 {{< tab header="CSharp" >}}
 var emailLocator = RelativeBy.WithLocator(By.TagName("input")).Above(By.Id("password"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-email_locator = {relative: {tag_name: 'input', above: {id: 'password'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L40" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let emailLocator = locateWith(By.tagName('input')).above(By.id('password'));
@@ -398,8 +390,8 @@ password_locator = locate_with(By.TAG_NAME, "input").below({By.ID: "email"})
 {{< tab header="CSharp" >}}
 var passwordLocator = RelativeBy.WithLocator(By.TagName("input")).Below(By.Id("email"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-password_locator = {relative: {tag_name: 'input', below: {id: 'email'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L44" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let passwordLocator = locateWith(By.tagName('input')).below(By.id('email'));
@@ -424,8 +416,8 @@ cancel_locator = locate_with(By.TAG_NAME, "button").to_left_of({By.ID: "submit"}
 {{< tab header="CSharp" >}}
 var cancelLocator = RelativeBy.WithLocator(By.tagName("button")).LeftOf(By.Id("submit"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-cancel_locator = {relative: {tag_name: 'button', left: {id: 'submit'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L48" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let cancelLocator = locateWith(By.tagName('button')).toLeftOf(By.id('submit'));
@@ -450,8 +442,8 @@ submit_locator = locate_with(By.TAG_NAME, "button").to_right_of({By.ID: "cancel"
 {{< tab header="CSharp" >}}
 var submitLocator = RelativeBy.WithLocator(By.tagName("button")).RightOf(By.Id("cancel"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-submit_locator = {relative: {tag_name: 'button', right: {id: 'cancel'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L52" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let submitLocator = locateWith(By.tagName('button')).toRightOf(By.id('cancel'));
@@ -478,8 +470,8 @@ email_locator = locate_with(By.TAG_NAME, "input").near({By.ID: "lbl-email"})
 {{< tab header="CSharp" >}}
 var emailLocator = RelativeBy.WithLocator(By.tagName("input")).Near(By.Id("lbl-email"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-email_locator = {relative: {tag_name: 'input', near: {id: 'lbl-email'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L56" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let emailLocator = locateWith(By.tagName('input')).near(By.id('lbl-email'));
@@ -503,8 +495,8 @@ submit_locator = locate_with(By.TAG_NAME, "button").below({By.ID: "email"}).to_r
 {{< tab header="CSharp" >}}
 var submitLocator = RelativeBy.WithLocator(By.tagName("button")).Below(By.Id("email")).RightOf(By.Id("cancel"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-submit_locator = {relative: {tag_name: 'button', below: {id: 'email'}, right: {id: 'cancel'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L60" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let submitLocator = locateWith(By.tagName('button')).below(By.id('email')).toRightOf(By.id('cancel'));
diff --git a/website_and_docs/content/documentation/webdriver/elements/locators.zh-cn.md b/website_and_docs/content/documentation/webdriver/elements/locators.zh-cn.md
index 5cd52a2d2d61..1a8d80ece046 100644
--- a/website_and_docs/content/documentation/webdriver/elements/locators.zh-cn.md
+++ b/website_and_docs/content/documentation/webdriver/elements/locators.zh-cn.md
@@ -89,9 +89,8 @@ available in Selenium.
     var driver = new ChromeDriver();
 	driver.FindElement(By.ClassName("information"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(class: 'information')
+  {{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L7" >}}
   {{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
@@ -123,10 +122,9 @@ textbox, using css.
     var driver = new ChromeDriver();
 	driver.FindElement(By.CssSelector("#fname"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(css: '#fname')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L11" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.css('#fname'));
@@ -155,10 +153,9 @@ We will identify the Last Name field using it.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Id("lname"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(id: 'lname')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L15" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.id('lname'));
@@ -188,10 +185,9 @@ We will identify the Newsletter checkbox using it.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Name("newsletter"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(name: 'newsletter')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L19" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.name('newsletter'));
@@ -219,10 +215,9 @@ In the HTML snippet shared, we have a link available, lets see how will we locat
     var driver = new ChromeDriver();
 	driver.FindElement(By.LinkText("Selenium Official Page"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(link_text: 'Selenium Official Page')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L23" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.linkText('Selenium Official Page'));
@@ -251,10 +246,9 @@ In the HTML snippet shared, we have a link available, lets see how will we locat
     var driver = new ChromeDriver();
 	driver.FindElement(By.PartialLinkText("Official Page"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(partial_link_text: 'Official Page')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L27" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.partialLinkText('Official Page'));
@@ -281,10 +275,9 @@ From the above HTML snippet shared, lets identify the link, using its html tag "
     var driver = new ChromeDriver();
 	driver.FindElement(By.TagName("a"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(tag_name: 'a')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L31" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.tagName('a'));
@@ -317,10 +310,9 @@ first name text box. Let us create locator for female radio button using xpath.
     var driver = new ChromeDriver();
 	driver.FindElement(By.Xpath("//input[@value='f']"));
   {{< /tab >}}
-  {{< tab header="Ruby" >}}
-    driver = Selenium::WebDriver.for :chrome
-	driver.find_element(xpath: '//input[@value='f']')
-  {{< /tab >}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L35" >}}
+{{< /tab >}}
   {{< tab header="JavaScript" >}}
     let driver = await new Builder().forBrowser('chrome').build();
 	const loc = await driver.findElement(By.xpath('//input[@value='f']'));
@@ -372,8 +364,8 @@ email_locator = locate_with(By.TAG_NAME, "input").above({By.ID: "password"})
 {{< tab header="CSharp" >}}
 var emailLocator = RelativeBy.WithLocator(By.TagName("input")).Above(By.Id("password"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-email_locator = {relative: {tag_name: 'input', above: {id: 'password'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L40" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let emailLocator = locateWith(By.tagName('input')).above(By.id('password'));
@@ -398,8 +390,8 @@ password_locator = locate_with(By.TAG_NAME, "input").below({By.ID: "email"})
 {{< tab header="CSharp" >}}
 var passwordLocator = RelativeBy.WithLocator(By.TagName("input")).Below(By.Id("email"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-password_locator = {relative: {tag_name: 'input', below: {id: 'email'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L44" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let passwordLocator = locateWith(By.tagName('input')).below(By.id('email'));
@@ -424,8 +416,8 @@ cancel_locator = locate_with(By.TAG_NAME, "button").to_left_of({By.ID: "submit"}
 {{< tab header="CSharp" >}}
 var cancelLocator = RelativeBy.WithLocator(By.tagName("button")).LeftOf(By.Id("submit"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-cancel_locator = {relative: {tag_name: 'button', left: {id: 'submit'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L48" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let cancelLocator = locateWith(By.tagName('button')).toLeftOf(By.id('submit'));
@@ -450,8 +442,8 @@ submit_locator = locate_with(By.TAG_NAME, "button").to_right_of({By.ID: "cancel"
 {{< tab header="CSharp" >}}
 var submitLocator = RelativeBy.WithLocator(By.tagName("button")).RightOf(By.Id("cancel"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-submit_locator = {relative: {tag_name: 'button', right: {id: 'cancel'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L52" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let submitLocator = locateWith(By.tagName('button')).toRightOf(By.id('cancel'));
@@ -478,8 +470,8 @@ email_locator = locate_with(By.TAG_NAME, "input").near({By.ID: "lbl-email"})
 {{< tab header="CSharp" >}}
 var emailLocator = RelativeBy.WithLocator(By.tagName("input")).Near(By.Id("lbl-email"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-email_locator = {relative: {tag_name: 'input', near: {id: 'lbl-email'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L56" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let emailLocator = locateWith(By.tagName('input')).near(By.id('lbl-email'));
@@ -503,8 +495,8 @@ submit_locator = locate_with(By.TAG_NAME, "button").below({By.ID: "email"}).to_r
 {{< tab header="CSharp" >}}
 var submitLocator = RelativeBy.WithLocator(By.tagName("button")).Below(By.Id("email")).RightOf(By.Id("cancel"));
 {{< /tab >}}
-{{< tab header="Ruby" >}}
-submit_locator = {relative: {tag_name: 'button', below: {id: 'email'}, right: {id: 'cancel'}}}
+{{< tab header="Ruby" text=true >}}
+{{< gh-codeblock path="examples/ruby/spec/elements/locators_spec.rb#L60" >}}
 {{< /tab >}}
 {{< tab header="JavaScript" >}}
 let submitLocator = locateWith(By.tagName('button')).below(By.id('email')).toRightOf(By.id('cancel'));