如何使用Selenium为RPA Challenge电影卡片图片找有效定位器？

问题描述 #

我正在编写Robot Framework代码访问rpachallenge.com，切换到「Movie Search」标签页搜索电影，需要把搜索结果里三部电影的卡片图片、标题及描述保存到JSON文件。目前搜索步骤已完成，但找不到标题卡片的有效定位器。

查看页面代码后发现三部电影结构完全一致，仅图片链接、标题等内容不同。尝试用class='card-image'定位图片时，出现错误：

WebDriverException: ... {"code":-32000,"message":"Cannot take screenshot with 0 height."}

排查后发现是因为存在多个同名class元素导致的。我是Selenium新手，不知道怎么用相关关键字解决问题，以下是我的代码（包含尝试过的注释代码）：

*** Settings ***
Documentation     Searches for given movie on RPA Challenge site 
...               and saves resulting data in JSON.

Library           OperatingSystem
Library           RPA.Browser.Selenium

Suite Teardown    Close All Browsers


*** Variables ***
${RPA_Challenge_URL}     https://rpachallenge.com
${img_URL}     http://image.tmdb.org
${movie}     Dune


*** Keywords ***
Open RPA Challenge Page
    ${use_chrome} =     Get Environment Variable     USE_CHROME     ${EMPTY}
    IF    "${use_chrome}" != ""
        Open Available Browser    ${RPA_Challenge_URL}    browser_selection=Chrome
        ...    download=${True}  # forces Chrome and matching webdriver download
    ELSE
        Open Available Browser    ${RPA_Challenge_URL}  # opens any available browser
    END   

Switch to Movie Search Tab
    Click Link     xpath://a[text()='Movie Search']

Search for Given Movie
    Input Text     name:searchStr     ${movie}
    Press Keys    name:searchStr    ENTER
    Wait Until Page Contains Element     css:div[class='card-image']

# WebDriverException: ... {"code":-32000,"message":"Cannot take screenshot with 0 height."}
Save Movie Card Image
    # Assign ID to Element  //ul[@class='card-image' and ./li[contains(., '_ngcontent-c3')]]    movie_cover
    Capture Element Screenshot     css:div[class='card-image']
    # Capture Element Screenshot     xpath://a[contains(text(), 'image.tmdb.org'.)]
    # Capture Element Screenshot     xpath://a[tag:img]
    # Capture Element Screenshot     css:div[class='card-image' and contains(text(), 'image')]    # invalid

# Element with locator 'css:div[class='card-title-activator']' not found.
Save Movie Title
    Capture Element Screenshot     css:div[class='card-title-activator']

# Return JSON
    # print(driver.find_element_by_xpath("//div[@id='json']").text)
    # Does the above need to go in a .py file?

*** Tasks ***
Return movie information from RPA Challenge site
    TRY
        Open RPA Challenge Page
        Switch to Movie Search Tab
        Search for Given Movie
        # Save Movie Title
        Save Movie Card Image
    EXCEPT
        ${err_ss} =    Set Variable    ${OUTPUT_DIR}${/}error.png
        Capture Page Screenshot     ${err_ss}
        Fail    Checkout the screenshot: ${err_ss}
    END

解决方案 #

1. 先定位所有电影卡片容器 #

页面中每个电影的卡片父容器是div.card，先获取所有卡片的列表，避免直接定位重复class元素：

${movie_cards}=    Get WebElements    css:div.card

2. 遍历卡片提取单部电影数据 #

对每个卡片，精准定位内部的图片、标题、描述，避免全局定位冲突：

Process Movie Cards
    ${movie_cards}=    Get WebElements    css:div.card
    ${movie_data}=    Create List
    :FOR    ${card}    IN    @{movie_cards}
    \    # 提取图片URL并截图
    \    ${img_element}=    Get WebElement    ${card}    css:div.card-image img
    \    ${img_src}=    Get Element Attribute    ${img_element}    src
    \    ${img_filename}=    Set Variable    ${OUTPUT_DIR}${/}movie_${title}.png
    \    Capture Element Screenshot    ${img_element}    ${img_filename}
    \    # 提取标题
    \    ${title}=    Get Text    ${card}    css:div.card-title-activator
    \    # 提取描述
    \    ${desc}=    Get Text    ${card}    css:div.card-content p
    \    # 组装单部电影数据
    \    ${movie_info}=    Create Dictionary    image=${img_src}    title=${title}    description=${desc}
    \    Append To List    ${movie_data}    ${movie_info}
    # 保存所有数据到JSON文件
    ${json_path}=    Set Variable    ${OUTPUT_DIR}${/}movie_results.json
    Convert To Json    ${movie_data}    ${json_path}    pretty_print=${True}

3. 直接获取页面原始JSON数据 #

不需要额外写Python代码，用Robot Framework关键字即可获取页面的JSON文本：

Get Page Raw JSON
    ${json_text}=    Get Text    id=json
    ${json_path}=    Set Variable    ${OUTPUT_DIR}${/}page_raw.json
    Create File    ${json_path}    ${json_text}

4. 更新任务流程 #

替换原任务中的无效关键字，使用新的处理逻辑：

*** Tasks ***
Return movie information from RPA Challenge site
    TRY
        Open RPA Challenge Page
        Switch to Movie Search Tab
        Search for Given Movie
        Process Movie Cards
        Get Page Raw JSON
    EXCEPT
        ${err_ss} =    Set Variable    ${OUTPUT_DIR}${/}error.png
        Capture Page Screenshot     ${err_ss}
        Fail    查看错误截图：${err_ss}
    END

内容的提问来源于stack exchange，提问作者msb