python - 如何在Python中使用Selenium成功获取嵌套在span标签下的所有图像的src

Question

我正在尝试抓取网站上的文章。并想获取图像的src。我进行了几次尝试，但我的代码似乎无法获取所有这些 src。

我正在使用 Selenium 3.141.0 和 Python 3.7。我想获取 4 样东西:图像的 src、全文链接、标题、文章片段。我可以成功抓取其余部分，但不能成功抓取 src。我想将所有这些详细信息转储到 pandas 数据框中。

这是我要抓取的网站的代码。

<article class="w29" data-minarticles="1.00">
    <a href="something.html">
        <figure class="left ">
            <span class="img-a is-loaded">
                <img alt="stock image" title="stock image" width="245" height="135" src="pic.JPG" class="">
                <noscript>
                  "<img src="pic.JPG" alt="stock image" title="stock image" width="245" height="135" />"
                </noscript>
             </span>
          </figure>
        <h2>
            <span>
            Article Title
            </span>
        </h2>
        <p>
          "Article snippet"
        </p>
      </a>
      ::after
</article>
<article class="w29" data-minarticles="1.00">
    <a href="something2.html">
        <figure class="left ">
            <span class="img-a is-loaded">
                <img alt="stock image2" title="stock image2" width="245" height="135" src="pic2.JPG" class="">
                <noscript>
                  "<img src="pic2.JPG" alt="stock image2" title="stock image2" width="245" height="135" />"
                </noscript>
             </span>
          </figure>
        <h2>
            <span>
            Article Title 2
            </span>
        </h2>
        <p>
          "Article snippet 2"
        </p>
      </a>
</article>
<article class="w29" data-minarticles="1.00">
    <a href="something3.html">
        <figure class="left ">
            <span class="img-a is-loaded">
                <img alt="stock image3" title="stock image3" width="245" height="135" src="pic3.JPG" class="">
                <noscript>
                  "<img src="pic3.JPG" alt="stock image3" title="stock image3" width="245" height="135" />"
                </noscript>
             </span>
          </figure>
        <h2>
            <span>
            Article Title 3
            </span>
        </h2>
        <p>
          "Article snippet 3"
        </p>
      </a>
</article>

这是我的代码:

driver.get(url)

# get sub posts
sub_posts = driver.find_elements_by_class_name("w29")

# get details
sub_list = []
for post in sub_posts:
    # Get the link to the full article
    sub_source = post.find_element_by_tag_name('a').get_attribute('href')
    # Get the src of the post 
    sub_photo = post.find_element_by_tag_name('img').get_attribute('src')
    # Get headline
    sub_headline = post.find_element_by_tag_name('h2').text
    # Get article snippet
    sub_snippet = post.find_element_by_tag_name('p').text
    sub_list.append([sub_photo, sub_source, sub_headline, sub_snippet])

post_df = pd.DataFrame(sub_list, columns=["photo", "source", "headline", "snippet"])

这是我尝试过的方法以及我在数据框中得到的结果，重点关注获取帖子的 src 的代码行:

尝试 1

sub_photo = post.find_element_by_tag_name('img').get_attribute('src')

尝试 1 的结果

无论出于何种原因，它删除了第一个 src，并为其余文章返回 None。

photo      source           headline         snippet
pic.JPG    something.html   Article Title    Article Snippet
None       something2.html  Article Title 2  Article Snippet 2
None       something3.html  Article Title 3  Article Snippet 3

尝试 2

sub_photo = post.find_element_by_xpath('//*[@id="content"]/div[6]/div[1]/div[2]/article/a/figure/span/img').get_attribute('src')

尝试 2 的结果

它抓取了第一个 src 并将相同的第一个 src 返回到其余文章。

photo      source           headline         snippet
pic.JPG    something.html   Article Title    Article Snippet
pic.JPG    something2.html  Article Title 2  Article Snippet 2
pic.JPG    something3.html  Article Title 3  Article Snippet 3

尝试3

sub_photo = post.find_element_by_css_selector('a>figure>span>img').get_attribute('innerHTML')

尝试3的结果

它抓取了第一个innerHTML，并为其余文章返回相同的第一个innerHTML。

photo       source           headline         snippet
\n<img...   something.html   Article Title    Article Snippet
\n<img...   something2.html  Article Title 2  Article Snippet 2
\n<img...   something3.html  Article Title 3  Article Snippet 3

这就是我正在寻找的:

photo      source           headline         snippet
pic.JPG    something.html   Article Title    Article Snippet
pic2.JPG   something2.html  Article Title 2  Article Snippet 2
pic3.JPG   something3.html  Article Title 3  Article Snippet 3

如果有人能指出我正确的方向，我将不胜感激。谢谢。

Answer 1

最初仅渲染几个图像，因此您可以将页面滚动到底部以提取所有 @src 值，也可以提取 @src (对于可见图像)或 @data-src (对于隐藏图像):

sub_photo = post.find_element_by_tag_name('img').get_attribute('src') or post.find_element_by_tag_name('img').get_attribute('data-src')

如果 @src 不是 None，则返回 @src 的值；如果 @，则返回 @data-src 的值src 是无