How To Handle Pseudo-Elements In CSS With Selenium?

While performing UI automation testing on a webpage, we all try to work with the web elements such as buttons, texts, etc. Interaction with the WebElements in the DOM is made possible with the help of Selenium locators. However, there are certain elements on a web page that even the locators can’t manage. Pseudo-elements in CSS fall in that category. Without the correct information, these pseudo-elements can be very hard to automate. In this article, we will see how to handle pseudo-elements in CSS with Selenium WebDriver.

Selenium is a powerful automation testing framework for checking complex web pages but pseudo-elements are tricky to automate. Selenium, when used in conjunction with the JavaScriptExecutor interface, helps to automate pseudo-elements. When testing your website, one must also ensure that the webpage functions as expected across various browser and OS combinations. Given that Selenium test automation is a cross-browser and cross-platform affair, you can perform automation tests at scale with the cloud-based Selenium Grid.

TABLE OF CONTENT

• What are Pseudo-Elements in CSS?
• Why Can’t Normal Locators Be Used To Automate Pseudo-Elements In Selenium?
• How To Work With Pseudo-Elements In Selenium?
• Running Tests On Cloud-Based Selenium Grid

What are Pseudo-Elements in CSS?

The combination of two words – pseudo and elements – can often lead to a misunderstanding, so let’s understand what exactly pseudo-elements are in CSS (Cascading Style Sheet).

While using CSS on any web element, we usually apply a style all over it. But what if we want to apply a style only to a specific part of it and not to a complete element. I know what you are thinking.

And the answer is YES. This is possible with the help of pseudo-elements. Pseudo-elements are a CSS component used to style specified parts of a web element. These pseudo-elements can be used to apply CSS on a portion or a specific part of a web element, such as:

• Applying CSS on the first letter of an element
• Applying CSS on the first line of an element
• Inserting some text before the text of an element
• Inserting some text after the text of an element

The pseudo-elements are defined with the help of a double colon (::), as shown in the below syntax:

selector :: pseudo - element {

property : value ;

}

Common types of Pseudo-Elements in CSS

Before starting to work on the pseudo-elements in Selenium, let us first see some commonly used types of pseudo-elements in CSS.

The ::first-line Pseudo-element

As the name suggests, the ::first-line pseudo-element in CSS is used to add special CSS styling only to the first line of the text and can be applied only to the block-level elements.

Syntax:

selector :: first - line {

property : value ;

}

Pseudo-element in CSS example: ::first-line pseudo-element

Consider the below HTML code:

< html> < head> < style> p:: first-line { color: #00ff00; font-variant: small-caps; } < body> < p>The quick brown fox jumps over the lazy dog. < br>The quick brown fox jumps over the lazy dog. < br>The quick brown fox jumps over the lazy dog.

view raw

first-linePseudo-element.html hosted with ❤ by GitHub

If you try to run the above HTML file, the output will be:

As you can see, the desired Green color (#00ff00) is applied only on the first line of the

element, and that is possible only with the help of::first-line pseudo-element.

The ::first-letter Pseudo-element

As the name suggests, the ::first-letter pseudo-element in CSS is used to add special CSS styling only to the first letter of the text and can be applied only to the block-level elements.

Syntax:

selector :: first - letter {

property : value ;

}

Pseudo-element in CSS example: ::first-letter pseudo-element

Consider the below HTML code:

<! DOCTYPE html >

< html >

< head >

</ head >

< body >

< p > The quick brown fox jumps over the lazy dog .

< br > The quick brown fox jumps over the lazy dog .

< br > The quick brown fox jumps over the lazy dog .

</ p >

</ body >

</ html >

If you try to run the above HTML file, the output will be:

As you can see, the desired Green color (#00ff00) is applied only on the first letter of the

</p≶ element, and that is possible only with the help of ::first-letter pseudo-element.

#automation

What is GEEK

Buddha Community

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Selenium Tool Suite - Components and Features

Selenium is an automation testing tool; it is primarily used to test websites and web applications; it is an open-source tool. With the help of Selenium, test cases can run directly in web browsers, just like a person operating the web browsers. It supports many web browsers such as Opera, Safari, Chrome, Firefox, IE, etc. There are several different sub tools to support different automation test approaches. In this article, we will learn about selenium tool suite, its components and features. So let’s start!!!

#selenium tutorials #selenium grid #selenium ide #selenium rc #selenium tool suite #selenium webdriver

Animating The Pseudo-Element Content Property Using CSS Keyframes Animation

At InVision, I’m building a small user interface (UI) that loads a list of documents and then caches them in memory for all subsequent renderings of the UI. During that one-time-only loading phase, I’m showing the static text, Loading...., in the view. But, this static text got me thinking about low-effort animations. And, whether or not I could use CSS @keyframes animations to animate the ellipsis portion of that text. It turns out, animating the content property works in modern browsers!

Normally with @keyframes animations, we use the timeline to define numeric CSS properties that can be animated gracefully using some sort of timing function. That said, it appears that we can use individual keyframes to set the state for non-animatable properties. These properties will be applied for the duration of the keyframe; but, will not receive any sort of transitiony magic.

In this demo, I’m animating the content property in order to apply an increasing number of dots (.) in the Loading....

#html / css #css #css keyframes #css keyframes animation

Locate Web Elements Using CSS Selector in Selenium

In Selenium WebDriver, in order to interact with a web element such as a click, or type something, we need to first locate the elements. One of the most important tasks of a test automation engineer is to be able to identify different elements on the webpage. There are several element locators but, locating elements using CSS Selectors is the preferred way as it is faster than XPath.  

I hope you guys must have understood how to locate elements on the web page using XPath and the plugin which helps in locating the XPath, ChroPath which are widely used element locators in Selenium. So, in this article, we’ll see how CSS takes the front line in finding an element. For further details, you can refer to the Selenium Training.

Below are the topics we’ll be covering in this blog:

• What are locators? Why is it used? 
• Different types of locators
• What are CSS locators?
• Commands
• Demo

So let’s begin the discussion learning about what are the element locators in Selenium and why is it of such soaring importance.

CSS Selectors: What are element locators? Why is it used?

Locating elements is indeed a nightmare because of the complexity of finding a web element in the webpage and them. To simplify this task, we use something known as locators in Selenium. 

Locators are defined as an address that identifies a web element uniquely within the webpage. It is basically a command that tells the Selenium IDE which GUI elements like – Text Box, Buttons, Check Boxes, etc. it needs to operate on.

Finding correct GUI elements is considered as a prerequisite for creating an automation script but, accurate identification of GUI elements is much more difficult than it sounds. Sometimes, you might even end up working with incorrect GUI elements or no elements at all! Hence, using the right locator ensures that the tests are faster, more reliable or has lower maintenance.

This helps us understand what Selenium can actually do. Now that you’ve understood what are element locators, let’s dive deeper and understand the various types of locators in Selenium. Learn more about Automation Testing and its applications from the Automation Testing Certification.

CSS Selectors: Different Types of Selenium Locators

There is a distinct range of web elements such as text box, check box, drop down menu, radio button, etc. It requires an effective and accurate approach to identify these elements. Thereby, you can propound that with an increase in the effectiveness of locator, the stability of the automation script will increase.

In order to identify web elements accurately and precisely, Selenium makes use of different types of locators. They are as follows:

• Id locator
• Name locator
• linkText & Partial linkText
• CSS Selector
• XPath

Let’s understand each of them in detail.

1. ID locator: The most popular way to identify web element is to use ID. ID’s are considered as the safest and fastest locator option and should always be the first priority among the multiple locators.
2. Name locator: This is also an effective way to locate an element which has a name attribute. With this strategy, the first element with the value of the name attribute will be returned. If no element has a matching name attribute, then a  NoSuchElementException will be raised.
3. LinkText & ParialLinkText: You can identify the hyperlinks on a web page using this linkText. It can be determined with the help of an anchor tag (<a>). In order to create the hyperlinks on a web page, you can use the anchor tags followed by the link text. In some cases, you may need to find links by a portion of the text in a linkText element. In such situations, you can use Partial Link Text to locate elements.
4. CSS Selectors: CSS is mainly used to provide style rules for the web pages and you can use it for identifying one or more elements in the web page. The CSS selector is always the best possible way to locate complex elements in the page. We’ll talk more about CSS selectors in the next topic. 
5. XPath: XPath is a language to query XML documents. XPath is an important strategy to locate elements in selenium. It also consists of a path expression along with some conditions. Here, you can easily write an XPath script/query to locate any element in the webpage. 

CSS Selectors: What are CSS Selectors?

As we know every modern web page is build of CSS, they define the cosmetic behavior (like size, fonts, inclination, etc.) of the whole page and/or objects in the page. The CSS rules do the grouping by class names of objects to define the combined cosmetic behavior of those objects. Similarly, we can use Object’s id property to define the individual object’s look and feel. We can also use CSS properties to identify objects.

This CSS Selector is the combination of an element and a selector value, which identifies the web element within a web page. The composite of an element and selector value is known as the Selector Pattern. This selector pattern is constructed using HTML tags, attributes, and their values. 

Using CSS selectors to locate elements has some benefits:

• It is faster
• More readable
• And used more often

Now let’s take a look at a few basic commands which help in locating the elements.

CSS Selector: Basic commands

First, let’s take a look at the syntax.

Syntax of CSS Selector

• HTML Tag: It is the tag which is used to denote the web element.
• #: The hash sign is used to symbolize the ID attribute. It is mandatory to use the hash sign if the ID attribute is being used.
• Value of ID attribute– It is the value of an ID attribute which is being accessed. The value of ID is always preceded by a hash sign.

example:

driver.findElement(By.cssSelector("#gh-btn")).click();

If we have the class attribute specified, 

This command helps in finding the element which has a class attribute specified.

• .– The dot sign is used to symbolize Class attribute. It is mandatory to use a dot sign if a Class attribute is being used.
• The value of Class is always preceded by a dot sign.

Example: 

driver.findElement(By.cssSelector(class.’typeahead__button’)).click();

• <HTML tag> [ locator * = ‘value’ ]

 

• This command used to correspond to the string with the help of a matching substring.
• *– Symbolic notation to match a string using substring.
• Substring– It is the string based on which match operation is performed. The likely string is expected to have the specified string pattern

Example:

css=input#Passwd[name$=’wd’]

<HTML tag> [ locator  ^ = ‘value’ ]

• ^– Symbolic notation to match a string using the prefix.
• Prefix– It is the string based on which match operation is performed. The likely string is expected to start with the specified string.

Example

css=input#Passwd[name^=’Pass’]

<HTML tag> [ locator $ = ‘value’ ]

• $– Symbolic notation to match a string using the suffix.
• The suffix– It is the string based on which match operation is performed. The likely string is expected to end with the specified string.

Example

css=input#Passwd[name$=’wd’]

• <HTML tag> <:> <contains> <(text)>

• :– The dot sign is used to symbolize contains a method
• Contains – It is the value of a Class attribute which is being accessed.
• Text – The text that is displayed anywhere on the web page irrespective of its location.
• This is one of the most frequently used strategies to locate web element because of its simplified syntax.

Example

css=input#Passwd[name:’Pass’]

Having understood this, we’ll move on and take a look at a demo where we’ll learn how CSS Selectors in Selenium Webdriver work.

CSS Selector: Demo

We’ll perform automation testing on one of the most famous e-commerce websites, i.e. Ebay.com in this demo. Let’s see how this can be done. We will see how to register the drivers for chrome and how to search an element on the page. We’ll consider working on the Eclipse IDE because it is easy to execute Java programs. 

For google chrome, you need to install a chrome driver in your system. Now let’s take a closer look at the code. As you can see,

• I have used System.setproperty() to set the path of chrome driver.
• Then I am using driver.get() to navigate to ebay.com.
• Maximize the web page
• Initialize the JavascriptExecutor which acts as an interface while working with Selenium
• Find the search box using the CSS Selector and add a # before specifying the ID,  and then send keys to the search box.
• Search the search icon on the web page using the CSS Selector and click it.
• Then we’ll scroll down the web page using the JavascriptExecutor and specify the axis in which we want to scroll.

package co.edureka;
 
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
 
public class DemoClass {
 
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "C:UsersVaishnaviDesktopChromechromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("<a href="http://ebay.com">http://ebay.com</a>");
driver.manage().window().maximize();
JavascriptExecutor js = (JavascriptExecutor) driver;
driver.findElement(By.cssSelector("#gh-ac")).sendKeys("OnePlus6T");
driver.findElement(By.cssSelector("#gh-btn")).click();
js.executeScript("window.scrollBy(0,300)");
}
 
}

This yields the output

First, this will open ebay.com and then we’ll search for OnePlus6T and click on the search icon.

After this, we’ll scroll down the page.

If you wish to learn Selenium and build a career in Selenium Technologies, then check out our Selenium training in Chennai which comes with instructor-led live training and real-life project experience. This training will help you understand Selenium in-depth and help you achieve mastery over the subject.

Now with this, we come to an end to this “CSS Selector in Selenium” blog. I Hope you guys enjoyed this article and understood what role CSS has to play in Selenium. Now that you have understood how to locate an element using the CSS Selector, check out the Selenium Certification Course by Edureka, a trusted online learning company with a network of more than 650,000 satisfied learners spread across the globe. This course is designed to introduce you to the complete Selenium features and its importance in testing software. Got a question for us? Please mention it in the comments section of “CSS Selectors in Selenium” and we will get back to you.

CSS Selector in Selenium WebDriver | Selenium Tutorial | Selenium Certification Training

This ‘CSS Selector in Selenium’ video by Edureka helps you understand how this locator aids to identify elements on a web page.

---

Also, take a look at this video on different types of element locators in Selenium.

Locators In Selenium Webdriver | Elements Locators In Selenium | Selenium Training

This Edureka video on Locators in Selenium talks about different types of selenium locators and steps involved to locate a web element using locators along with examples.

Having understood this, let’s understand the main concept of this article, What are CSS Selectors in Selenium Webdriver.

Original article source at: https://www.edureka.co/

#selenium #css #elements 

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics