使用 Python Selenium 在网页上找到单击的图标并单击另一个网页上的类似图标

Question

我已经为此绞尽脑汁太久了，并且在互联网上搜索过，但我找不到合适的解决方案。 如果有人能帮我摆脱我发现自己所处的这种玉米，我将不胜感激。（如果可以的话，我会给你买啤酒？？？？）

我已经尝试了所有我知道的，测试了所有我能做的，但找不到稳定的解决方案。 解决方案需要稳定。这就是我的问题。

我无法发布我使用的任何 PYTHON 代码，因为它没有意义。

场景： 主页上有 4 个图标（类别-A/B/C/D）。 我需要确定用户单击了哪个图标。这可以是 4 个图标中的任何一个，但一次只能选择/单击一个。用户选择是随机的。 一旦知道点击了哪个 Category-Icon，我想打开一个新的 Firefox 选项卡（具有相同的 Category-Icons 布局）并让代码点击与主页上相同的 Category-Icon。 （我可以切换到新标签页并返回 Firefox）

点击其中一个图标的主网页下方的 HTML。 ＃笔记： 显示活动图标的关键词是 “split-item active”（最后一个 - “category-D”）。

显示活动图标的单词是“white”（最后一个 - “category-D”）。

    <ul class="split-list">

    <li class="split-item">
    <div class="category-icon icon-cat-A "></div>
    <div class="category-text">category-A</div>
    </li>
    <li class="split-item">
    <div class="category-icon icon-cat-B"></div>
    <div class="category-text">category-B </div>
    </li>
    <li class="split-item">
    <div class="category-icon icon-cat-C"></div>
    <div class="category-text">category-C</div>
    </li>
    <li class="split-item active">
    <div class="category-icon icon-cat-D-white">
    </div><div class="category-text">category-D</div>
    </li>
    <li class="active-bg"></li></ul>


    

**ACTIVE/MAIN WEB PAGE:**

INNER HTML

    <li class="split-item"><div class="category-icon icon-cat-A"></div><div class="category-text">category-A</div></li>

    <li class="split-item"><div class="category-icon icon-cat-B"></div><div class="category-text">category-B</div></li>

    <li class="split-item"><div class="category-icon icon-cat-C"></div><div class="category-text">category-C</div></li>

    <li class="split-item active"><div class="category-icon icon-cat-D-white"></div><div class="category-text">category-D</div></li>


OUTER HTML

    <li class="split-item"><div class="category-icon icon-cat-A"></div><div class="category-text">category-A</div></li>

    <li class="split-item"><div class="category-icon icon-cat-B"></div><div class="category-text">category-B</div></li>

    <li class="split-item"><div class="category-icon icon-cat-C"></div><div class="category-text">category-C</div></li>

    <li class="split-item active"><div class="category-icon icon-cat-D-white"></div><div class="category-text">category-D</div></li>



X-Path 

    /html/body/div/div[3]/div/div/section/div/div[2]/div[4]/ul/li[1]
    /html/body/div/div[3]/div/div/section/div/div[2]/div[4]/ul/li[2]
    /html/body/div/div[3]/div/div/section/div/div[2]/div[4]/ul/li[3]
    /html/body/div/div[3]/div/div/section/div/div[2]/div[4]/ul/li[4]




**NEW WEB PAGE (no icons clicked) on which I want the code to click the same selected icon as on main web page.**

INNER HTML

    <li class="split-item"><div class="category-icon icon-cat-A"></div><div class="category-text"> category-A</div>

    </li><li class="split-item"><div class="category-icon icon-cat-B"></div><div class="category-text"> category-B</div>

    </li><li class="split-item"><div class="category-icon icon-cat-C"></div><div class="category-text">category-C</div>

    </li><li class="split-item"><div class="category-icon icon-cat-D"></div><div class="category-text">category-D</div>

    </li><li class="active-bg"></li>


OUTER HTML

    <ul class="split-list">

    <li class="split-item"><div class="category-icon icon-cat-A"></div><div class="category-text">category-A</div></li>

    <li class="split-item"><div class="category-icon icon-cat-B"></div><div class="category-text">category-B</div></li>

    <li class="split-item"><div class="category-icon icon-cat-C"></div><div class="category-text">category-C</div></li>

    <li class="split-item"><div class="category-icon icon-cat-D"></div><div class="category-text">category-D</div></li>

    <li class="active-bg"></li></ul>



X-Path

    /html/body/div[1]/div[3]/div/div/section/div/div[3]/div[4]/ul/li[1]
    /html/body/div[1]/div[3]/div/div/section/div/div[3]/div[4]/ul/li[2]
    /html/body/div[1]/div[3]/div/div/section/div/div[3]/div[4]/ul/li[3]
    /html/body/div[1]/div[3]/div/div/section/div/div[3]/div[4]/ul/li[4]

谢谢

Answer 1

试试这个：

首先获取选择的元素：

el = driver.find_element_by_css_selector('.split-list .active .category-icon')

从这个元素中，您需要获取用于在下一个选项卡中选择的图标的类名。

icon_class_name = el.get_attribute('className').split()[1]

（以上内容可能会有所改进，以确保您获得正确的课程）

获得类名后，转到第二个选项卡（前提是您知道如何操作！） 然后使用找到的类名并点击它

driver.find_element_by_css_selector(f'.split-list .{icon_class_name}').click()

如果单击不起作用，您可能需要单击父元素。您将需要获取所有父元素并找到要单击的正确匹配项。

parent_elements = driver.find_elements_by_css_selector('.split-list .category-icon')

for parent_el in parent_elements:
    els = parent_el.find_element_by_css_selector(f'.{icon_class_name}')
    if len(els) > 0:
        parent_el.click()
        break
else:
    // Else here is used if we never break.
    print("Could not find the element matching {icon_class_name}")

更新
由于选中时className会附加-white，所以只需从className中删除这部分

icon_class_name = el.get_attribute('className').split()[1].replace('-white', '')

更新您要查找的元素的值，以允许找到在新网站上选择的元素。 （假设我的班级也附加 -white 或其他任何东西）

els = parent_el.find_element_by_css_selector(f'[class*="{icon_class_name}"]')