Scraping a page via CSS style data

The challenge was to scrape a site where the class names for each element were out of order / randomised. So the only way to get the data in the correct sequence was to sort through the CSS styles by left, top, and match to the class names in the divs…

The names were meaningless and there was no way of establishing an order, a quick check in developer tools shows the highlighter rectangle jumps all over the page in no particular order when traversing the source code.

page_useddemo-gear_fF0iR8Rn6hrUOJh0YwkOA body 

So we began the code by identifying the CSS and then parsing it:

There was NO possibility of sequentially looping through the divs to extract ordered data.

After watching the intro to the challenge set on YouTube, and a handy hint from CMK we got to work.

From this article you will learn as much about coding with Python as you will about web scraping in specific. Note I used requests_html, as it provided me with the option to use XPATH.

BeautifulSoup could also have been used.

Python methods used:

round

x = round(1466,-2)
print(x) # 1500

x = round(1526,-2)
print(x) # 1500

x = round(1526,-1)
print(x) # 1530

I needed to use round as the only way to identify a “Column” of text was to cross reference the <style> “left px” and “top px” with the class names used inside the divs. Round was required as there was on occasion a 2 or 3 px variation in the “left” value.

itemgetter

Item getterfrom operator import itemgetter

ls.sort(key=itemgetter('left','top'))

I had to sort the values from the parsed css style in order of “left” to identify 3 columns of data, and then “top” to sort the contents of the 3 columns A, B, C.

zip

zipped = zip(ls_desc,ls_sellp,ls_suggp)

rows = list(zipped)

So to get the data from the 3 columns, A (ls_desc), B (ls_sellp), and C (ls_suggp) I used ZIP, but…….the were/are 2 values missing in column C!!

A had 77 values,

B had 77 values

C had 75 !

Not only was there no text in 2 of the blanks in column C, there was also NO text or even any CSS.

We only identified this as an issue after running the code – visually the page looked consistent, alas the last part of column “C” becomes out of sequence with the data in colmumn A and B which are both correct.

Solution?

Go back and check if column “C” has a value at the same top px value as Column “B”. If no value then insert an “x” or spacer into Column C at that top px value.

This will need to be rewritten using dictionaries, and create one dictionary per ROW rather than my initial idea of 1 list per column and zipping them!

special thanks to “code monkey king” for the idea/challenge!

url=’http://audioeden.com/useddemo-gear/4525583102‘

My initial solution:

https://github.com/RGGH/Experimental-Custom-Scrapers/blob/master/audio1.py

Next :

Rewrite the section for “Column B” to check for presence of text in column “C” on the same row…

1 missing value halfway down column “C” means more error checking is required! – If you just want the “Selling Price” and “Description” then this is code is 100% successful! 👍

Conclusion:

For more robust web scraping where css elements may be missing use dictionaries/enumerate each row and check. It’s the old case of “you don’t know what you don’t know”

If you can ensure each list has the same number of items, then ZIP is ok to use.