Problem:
๐๐ฌ๐ข๐ง๐ ๐ฌ๐๐ฅ๐๐ง๐ข๐ฎ๐ฆ ๐๐ฎ๐ญ๐จ๐ฆ๐๐ญ๐ข๐จ๐ง - ๐ซ๐๐๐ ๐ญ๐ก๐ * ๐ซ๐๐ญ๐ข๐ง๐ ๐จ๐ ๐ญ๐ก๐ ๐๐จ๐จ๐ค, ๐๐ง๐ญ๐๐ซ ๐ข๐ญ ๐ข๐ง ๐ญ๐ก๐ ๐ญ๐๐ฑ๐ญ ๐๐จ๐ฑ ๐๐ง๐ ๐๐ฅ๐ข๐๐ค "๐๐ก๐๐๐ค ๐ซ๐๐ญ๐ข๐ง๐ " ๐๐ฎ๐ญ๐ญ๐จ๐ง. ๐ฒ๐จ๐ฎ ๐ฌ๐ก๐จ๐ฎ๐ฅ๐ ๐ฌ๐๐ "๐ฐ๐๐ฅ๐ฅ ๐๐จ๐ง๐!" ๐ฆ๐๐ฌ๐ฌ๐๐ ๐.
๐๐ข๐ง๐ค: https://lnkd.in/dr5adTZK ๐๐ข๐ง๐ญ: Use CSS Pseudo-elements Concept
๐ ๐จ๐ซ ๐ฆ๐จ๐ซ๐ ๐๐ง๐๐จ ๐จ๐ง ๐๐๐ ๐๐ฌ๐๐ฎ๐๐จ-๐๐ฅ๐๐ฆ๐๐ง๐ญ๐ฌ: https://lnkd.in/d9Uhd8QV
Your challenge is given above - just open the link & write down your automation script. You can code in any language you like - Java, Python,C# etc.
๐๐ก๐๐ซ๐ ๐ฒ๐จ๐ฎ๐ซ ๐๐จ๐๐๐ฌ ๐ข๐ง ๐ ๐๐จ๐ฆ๐ฆ๐๐ง๐ญ! - ๐๐๐ญ'๐ฌ ๐๐๐๐ซ๐ง & ๐๐ซ๐จ๐ฐ ๐๐จ๐ ๐๐ญ๐ก๐๐ซ!๐
Let's jump in and make Day 3 a success!
Solution: Checkout the Master branch with Solution class.
Following is walkthrough to the code:
-
What is CSS: to add some style to some element
-
Pseudo Element: Now what if we want to apply some style let us color property to some portion of an element then comes Pseudo element.
-
How to add pseudo element style by simply adding double colon to the style (::)
then we can use Before, After, firstline, firstletter, marker etc to provide additional style to portion of above elements eg: to firstline, to firstletter etc.
Solution walkthrough:
Please take a look on above git repo
Now let us talk about original question how to get the text of rating which is using the concept of Pseudo element and has dom:
::after
-
click on after
-
In lower section styles will appear which will show additional information like as follows:
content: "***";
display: inline-block;
-
So now we need to get content and same is not possible through getText() because this is not directly available as part of element
-
We will have to use JavaScriptExecutor first thing to deal with these elements.
-
First of all need to find css which .className so it will be .star-rating in this case
-
Once we got the css, now we need to write following line:
js.executeScript("return window.getComputedStyle(document.querySelector('.star-rating'),'::after').getPropertyValue('content')")
.toString();
-
document.QuerySelector will let us point to the element.
-
Once we get the element using css selector next step is to reach to pseudo element related content, so we will use getComputedStyle method.
-
this is how we will be able to find the