figuring out the CSS selector of an element on a page such as Instagram

[Michael Mossey]

Hello, I'd like to learn about how I can determine the CSS selector of an arbitrary element on a page on a commercial website with complex ids and classes like Instagram. I'm interested in some kind of tutorial and I'm okay with reading a lot. I tried searching for this, but I don't know what search terms to use for this idea of determining in a general way a CSS selector for a commercial website. I think I'm pretty clear on the selenium API, I just don't know what selector to drop in.

My issue started when I tried to use the instructions for creating an instagram bot here:

https://towardsdatascience.com/increase-your-instagram-followers-with-a-simple-python-bot-fde048dce20d

This bot doesn't work because it doesn't find the "log in" button. I fiddled for a long time with trying different CSS selectors, and I also added a 5 second wait, but to no avail.

Mike

[Joseph Conlin]

I see lots of people on the Selenium IRC / Slack channel speak highly of this "game" that helps teach CSS Selectors.

http://flukeout.github.io/

[Michael Mossey]

Thanks, that game is great.

Also I should make clear that I'm also confused why that tutorial doesn't work and also if there's anything special about complex websites. For instance, the instagram website elements have many classes with inscrutable names, and it's not clear which ones to use. So as I was fiddling around, I was getting zero feedback as to why my selectors didn't work... they just failed. Also, the selector that was published in that example should by all rights work... it exactly matches the button as far as I could tell. (It uses nth-child, but it was pretty clear to me what that was doing.) But it fails without any useful error message. And this is a published tutorial, so I'm not sure when it stopped working.

Mike

--
You received this message because you are subscribed to the Google Groups "Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/e40848d0-9a7e-4d9d-8b13-791f1669646a%40googlegroups.com.

[Anil Gursahani]

Using the Inspect on the Sign In button and selecting Copy Element returns the following - <a href="https://medium.com/m/signin?operation=login&amp;redirect=https%3A%2F%2Ftowardsdatascience.com%2Fincrease-your-instagram-followers-with-a-simple-python-bot-fde048dce20d&amp;source=post_page-----fde048dce20d---------------------nav_reg-" class="az ba bb bc bd be bf bg bh bi bj bk bl bm bn bo" rel="noopener">Sign in</a>

You can create the css Selector from the tag of "a" and class of  "az ba bb bc bd be bf bg bh bi bj bk bl bm bn bo" as follows:

"a. az.ba.bb.bc.bd.be bf.bg.bh.bi.bj.bk.bl.bm.bn.bo" 

Here is the code in Java using Selenide to click on the sign in button:

ackage selenium;

import org.junit.Test;
import org.openqa.selenium.By;

import static com.codeborne.selenide.Selenide.$;
import static com.codeborne.selenide.Selenide.open;

public class InstagramTest {
    @Test
    public void automationTest()
    {
        open("https://towardsdatascience.com/increase-your-instagram-followers-with-a-simple-python-bot-fde048dce20d");
        $(By.cssSelector("a.az.ba.bb.bc.bd.be.bf.bg.bh.bi.bj.bk.bl.bm.bn.bo")).click();

    }
}

You might have considered using  "a[rel='noopener']" but there is more than one occurrence of this selector ,so it would not work.

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAHKS%3DzG6UZ4p%2Bcx8RAyEn_0EJ%2BJ%2B%3DdghT%2B%3D-rt1JwZQCJ2hmCg%40mail.gmail.com.

[Joseph Conlin]

>> Also I should make clear that I'm also confused why that tutorial doesn't work and also if there's anything special about complex websites. For instance, the instagram website elements have many classes with inscrutable names, and it's not clear which ones to use.

I personally would not create a tutorial based on a website that I didn't have control over.  Any time the code / HTML on the website changes, there is a potential for locators to stop working.  This can be even worse when the HTML is generated by front end dev frameworks, as JavaScript might generate a new ID each time the page is loaded, or other tools might create slightly different classes or structure each time a new build is created. 

On top of that, in the case of large sites like Instagram, it's very possible that the company doesn't want to have people automate their website, and they could be actively employing measures that make automating their site more difficult.  I would only try to automate an Instagram site if I worked for Instagram and was testing the site internally. 

However, many companies provide APIs that allow access to data without having to use a browser, so that might be an avenue you could explore.  I have no idea what Instagram offers as I don't use it.

>> So as I was fiddling around, I was getting zero feedback as to why my selectors didn't work... they just failed.

I usually get some kind of feedback that the element was not found at least.  If an element not found exception comes back, that means that the selector, as written, was run and was unable to find anything that matches.  That usually means that the selector is either invalid syntax or needs to be updated due to an underlying code / HTML change.  Are you not getting back any error / exception information at all?

>> Also, the selector that was published in that example should by all rights work... it exactly matches the button as far as I could tell. (It uses nth-child, but it was pretty clear to me what that was doing.) But it fails without any useful error message. And this is a published tutorial, so I'm not sure when it stopped working.

You can use the browser console / tools to try out your selectors and make sure that they are working correctly.  If it finds something, you should be able to see highlighting and feedback to show what is being found. 

I see that you say it fails "without any *useful* error message" (emphasis mine).  If you provide the error message, someone might be able to help you understand what it is trying to tell you. 

As for this being a published tutorial, tutorials based on sites that can change after the tutorial is published often become untrustworthy before very long - you can learn concepts from them, but the specifics, like locators, are likely to become out of date very quickly as the site gets updated.

A quick search for "selenium writing good locators" turned up this article that you might find useful.  It has, in my opinion, lots of useful information as well as some things I don't fully agree with personally, but you'll find over time that there are a lot of personal opinions and philosophical disagreements over things like best practices when it comes to Selenium.  In many cases, it comes down to the specifics of the site and people you're interacting with.

https://screenster.io/selenium-locators-best-practices-7-helpful-tips-for-ui-testers/

Good luck!

To unsubscribe from this group and stop receiving emails from it, send an email to seleniu...@googlegroups.com.

[Michael Mossey]

Thanks, Joseph. I apologize for implying there was no error message, as of course there was and of course I could potentially get help from it. In all cases when I say there was "no useful" error message, I meant that I just got the message NoSuchElement along with the selector it tried. It's probably wrong of me to think it could be more helpful than that, come to think of it. So anyway your other feedback is very helpful, along with the idea that I can test selectors in the browser and along with the idea that an Instagram bot might not be a good first project.

Mike

To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/e16ac7e7-8a0d-4cc5-9a2e-3cab63ef0e61%40googlegroups.com.

[Michael Mossey]

To follow up, I got Instagram to work. It didn't work until I included all the classes for elements and fixed some 0/O confusion. It really does work fine when I get all the typos out. I guess I concluded too quickly that something was wrong.

Mike