Custom selector issues

❓Help and questions 🆕 Community Migration (temp)
1

I am having trouble getting bardeen to see the links on this webpage: https://traded.co/deals/alabama/

I have tried editing the custom selector but cant seem to get it to work. Can you please help me identify and also, if you can, explain how you were able to get bardeen to select it

2

Hi @skye, I was able to return 24 links without custom selectors with the following playbook:

I created a list scraper template and selected here to get it to return the links:

image
image1009×968 178 KB

I hope this helps!
Thank you,
Jess

3

Wow that did help, I was just selecting the wrong area on the page… hypothetically speaking, lets say Bardeen did not pick up on the link regardless of where I click. How would you identify the right element / selector as you are inspecting the code?

1 Like
4

Correct. And yes, you can identify specific elements of the page using CSS or XPath selectors.

Inside of the scraper template, select “Edit” of a field:

image
image760×267 16.8 KB

Then provide the specific selectors here:

image
image763×988 72.2 KB

Remove the default Bardeen provided CSS selectors before adding your own and toggle on the XPath if using that method.

I hope this helps!

5

Yes, thank you! I know that it is possible and I know how to do the steps above but I was having trouble getting the right selector on that webpage even after inspecting the page and trying different things. Was hoping maybe you could show me with a specific example from that page?

1 Like
6

There are multiple correct selectors.

  1. One full correct CSS Selector to grab all 24 links from this page is:

#__next > div.MuiBox-root.css-awa75k > div > div.MuiBox-root.css-1yuhvjn > div.MuiGrid-root.MuiGrid-container.MuiGrid-spacing-xs-2.css-isbt42 > div > div > figure > a

  • I emphasis the word full in the above statement because Bardeen automatically generates the container when first selecting two fields from the list of items you’re trying to scrape. The container automatically generated for this page was:

DIV#__next:nth-of-type(2) > DIV:nth-of-type(2) > DIV:first-of-type > DIV:last-of-type > DIV:first-of-type > DIV

  1. Another full correct CSS Selector to grab all 24 links form this page is:

DIV#__next:nth-of-type(2) > DIV:nth-of-type(2) > DIV:first-of-type > DIV:last-of-type > DIV:first-of-type > DIV > DIV > figure > a

  • Note the bold is the same as the container selector mentioned above.
  1. Another way is to use “:scope” to reference the container prior to the direct CSS Selector, like this:
    image
    image647×524 55.2 KB

I hope this helps!
Thank you,
Jess