Question

In the following code:

page = Nokogiri::HTML($browser.html)
page_links = page.css("a").select
page_links.each do |link|
    if not link.nil?
        if not link['href'].nil? and !!link['href']["/about"]
            puts link.class
            puts link.inspect
        end
    end
end

the link.class outputs the following:

Nokogiri::XML::Element
#<Nokogiri::XML::Element:0x..fdb623d3c name="a" attributes=[#<Nokogiri::XML::Attr:0x..fdb623c7e name="action-type" value="8">, #<Nokogiri::XML::Attr:0x..fdb623c74 name="class" value="a-n g-s-n-aa g-s-n-aa I8 EjFvwd VP">, #<Nokogiri::XML::Attr:0x..fdb623c6a name="target" value="_top">, #<Nokogiri::XML::Attr:0x..fdb623c60 name="href" value="./104882190640970316938/about">] children=[#<Nokogiri::XML::Text:0x..fdb623792 "PetSmart Winchester">]>

And link.inspect outputs the following:

Nokogiri::XML::Element
#<Nokogiri::XML::Element:0x..fdb623666 name="a" attributes=[#<Nokogiri::XML::Attr:0x..fdb6235a8 name="action-type" value="8">, #<Nokogiri::XML::Attr:0x..fdb62359e name="class" value="a-n g-s-n-aa g-s-n-aa Gbb EjFvwd VP">, #<Nokogiri::XML::Attr:0x..fdb623594 name="target" value="_top">, #<Nokogiri::XML::Attr:0x..fdb62358a name="href" value="./104882190640970316938/about">] children=[#<Nokogiri::XML::Element:0x..fdb6230bc name="div" attributes=[#<Nokogiri::XML::Attr:0x..fdb62304e name="style" value="height:110px; width:110px;">] children=[#<Nokogiri::XML::Element:0x..fdb622e1e name="img" attributes=[#<Nokogiri::XML::Attr:0x..fdb622db0 name="style" value=" height: 110px; width: 110px;">, #<Nokogiri::XML::Attr:0x..fdb622da6 name="class" value="mja">, #<Nokogiri::XML::Attr:0x..fdb622d9c name="src" value="https://mts0.google.com/vt/data=TSwRVVf0DGlwBQqarpBU3wUz-i2gqbuWEbxTilWKINf30Au9l0oLM_ojk4KI0oPUi8kL5fJaJWte45O3abOXMzE3L7xDBg">]>]>]>

In Nokogiri I can access the link text by link.content and the link url by link['href'] . Yet neither of these methods work for image source from the inspect results.

How can I get the img src within this example code that inspect is revealing?

UPDATE: HERE IS THE HTML CODE

<div class="HWb">
<div class="erb">
    <div class="ubb">
        <div role="button" class="a-f-e c-b c-b-T c-b-Oe c-b-H-ra L0a X9" tabindex="0"
        data-placeid="6817440171144926830" data-source="lo-gp" data-inline="true"
        data-tooltip-delay="600" data-tooltip-align="b,l" data-oid="104882190640970316938"
        data-size="small">
            <span class="TIa c-b-fa"></span>
        </div>
    </div>
    <h3 class="drb">
        <a href="./104882190640970316938/about" target="_top" class="a-n g-s-n-aa g-s-n-aa I8 EjFvwd VP"
        action-type="8">PetSmart Winchester</a>
    </h3>
</div>
<div class="Qbb">
    <span class="vqb SIa">Pet Store</span>
    <span class="lja SIa">
        <a href="//www.google.com/url?sa=D&amp;oi=plus&amp;q=https://maps.google.com/maps?q%3DPetsmart%2Bloc:22601%26numal%3D1%26hl%3Den-US%26gl%3DUS%26mix%3D2%26opth%3Dplatter_request:2%26ie%3DUTF8%26cid%3D6817440171144926830%26iwloc%3DA"
        target="_blank" class="a-n uqb">2310 Legge Boulevard, Winchester, VA</a>
    </span>
    <span class="SIa">[phone]</span>
</div>
<div class="crb">
    <div class="Pbb a-f-e">
        <div class="Fbb">
            <div class="cca">
                <div class="tob">
                    <div class="xob">“Do not bother with the grooming salon, the staff are unusually stupid.
                        Otherwise the store is a typical petsmart.”</div>
                </div>
            </div>
        </div>
    </div>
    <div class="dWa">
        <a href="./104882190640970316938/about" target="_top" class="a-n g-s-n-aa g-s-n-aa Gbb EjFvwd VP"
        action-type="8"><div style="height:110px; width:110px;"><img src="https://mts0.google.com/vt/data=TSwRVVf0DGlwBQqarpBU3wUz-i2gqbuWEbxTilWKINf30Au9l0oLM_ojk4KI0oPUi8kL5fJaJWte45O3abOXMzE3L7xDBg" class="mja" style=" height: 110px; width: 110px;"></div></a>
    </div>
</div>

Answer 1

Without the HTML you’re making it a lot harder, but after some digging into the inspect output, I think I have a reasonable HTML snippet.

This is how I’d go about getting to the <img src="..."> tag:

require 'nokogiri'

doc = Nokogiri::HTML(<<EOT)
<a action-type="8" class="a-n g-s-n-aa g-s-n-aa Gbb EjFvwd VP" target="_top" href="./104882190640970316938/about">
    <div style="height:110px; width:110px;">
        <img style=" height: 110px; width: 110px;" class="mja" src="https://mts0.google.com/vt/data=TSwRVVf0DGlwBQqarpBU3wUz-i2gqbuWEbxTilWKINf30Au9l0oLM_ojk4KI0oPUi8kL5fJaJWte45O3abOXMzE3L7xDBg">
    </div>
</a>
EOT

doc.at('img')['src'] # => "https://mts0.google.com/vt/data=TSwRVVf0DGlwBQqarpBU3wUz-i2gqbuWEbxTilWKINf30Au9l0oLM_ojk4KI0oPUi8kL5fJaJWte45O3abOXMzE3L7xDBg"

You’ll need to take the time to improve your question and provide more detail if that doesn’t work.

---

If you are not sure whether you will have 0, 1 or 1+ instances of a tag, use search because it returns a NodeSet, which acts like an Array, making it easy to deal with no, single or multiple occurrences:

doc.search('img').map{ |img| img['src'] } 

will return all the <img src="..."> values in the document in an array. You can iterate over those easily or use empty? to see if there are no hits:

doc.search('img').map{ |img| img['src'] }.each do |src|
  # do something with src if any are found.
end

If it’s possible you’ll have <img> tags without the src="..." parameter, use compact to filter them out before iterating:

doc.search('img').map{ |img| img['src'] }.compact.each do |src|
  # do something with src if any are found.
end

If you only expect 0 or 1 occurrence, try:

src = doc.at('img') && doc.at('img')['src']

as in:

doc = Nokogiri::HTML(<<EOT)
<html><body><p>foo</p>
<img src="blah">
<p>bar</p></body></html>
EOT
src = doc.at('img') && doc.at('img')['src']
=> "blah"

or, without the src parameter:

doc = Nokogiri::HTML(<<EOT)
<html><body><p>foo</p>
<img>
<p>bar</p></body></html>
EOT
src = doc.at('img') && doc.at('img')['src']
=> nil

or missing the <img> tag entirely:

doc = Nokogiri::HTML(<<EOT)
<html><body><p>foo</p>
<p>bar</p></body></html>
EOT
src = doc.at('img') && doc.at('img')['src']
=> nil

If you want to continue to use an if block:

if doc.at('img')
  puts doc.at('img')['src']
end

will accomplish what your:

if not doc.at('img').nil?
  puts doc.at('img')['src']
end

accomplishes, but in a more straightforward and concise manner, while maintaining readability.

The downside to doing two at lookups is it can be costly in big documents, especially inside a loop. You could get all Perlish and use:

if (img = doc.at('img'))
  puts img['src']
end

but that’s not really the Ruby way. For clarity and long-term maintenance, I’d probably use:

img = doc.at('img')
if (img)
  puts img['src']
end

but that exposes the img variable, cluttering up things. It’s programmer’s choice at that point.