使用Selenium自动化测试定位iframe以及修改img标签的display属性值

        在使用 Selenium 进行自动化测试时，处理 iframe 是一个常见问题。当页面中出现 iframe 时，需要先切换到该 iframe 内部，才能正常定位和操作其中的元素。以下是处理 iframe 的步骤和示例代码：

步骤

1. 切换到 iframe：使用 switch_to.frame() 方法切换到目标 iframe。
2. 定位和操作 iframe 中的元素：在切换到 iframe 后，可以使用 find_element 方法定位元素并进行操作。
3. 切换回主文档：使用 switch_to.default_content() 方法切换回主文档，以便继续操作页面中的其他元素。

示例代码

以下是一个完整的示例，假设在点击一个按钮后会出现一个 iframe：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time

# 设置 WebDriver 的路径（例如 ChromeDriver）
driver_path = '/path/to/chromedriver'  # 请替换为你的 chromedriver 路径

# 启动 Chrome 浏览器
driver = webdriver.Chrome(executable_path=driver_path)

# 打开目标网站
driver.get('https://example.com')  # 请替换为目标网站的 URL

# 等待并点击一个按钮，假设这会加载出一个 iframe
button = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.ID, 'myButton'))  # 替换为实际按钮的选择器
)
button.click()

# 等待 iframe 加载
WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.TAG_NAME, 'iframe'))  # 等待 iframe 加载
)

# 切换到 iframe，假设这里使用索引 0 来选择第一个 iframe
driver.switch_to.frame(0)

# 现在可以定位并操作 iframe 内部的元素
input_field = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, 'iframeInput'))  # 替换为实际 iframe 内部元素的选择器
)
input_field.send_keys('输入内容')

# 还可以点击按钮等其他操作
submit_button = driver.find_element(By.ID, 'iframeSubmit')  # 替换为实际按钮的选择器
submit_button.click()

# 处理完成后可以切换回主文档
driver.switch_to.default_content()

# 继续操作主文档中的其他元素
# ...

# 如果需要关闭浏览器
driver.quit()

关键点说明

1. 切换到 iframe：

   • 使用 driver.switch_to.frame() 方法切换到指定的 iframe。可以使用 frame 的索引（如 0，表示第一个 iframe）、name 属性，或持有 WebElement 对象（如 iframe_element）进行切换。

2. 等待条件：

   • 使用 WebDriverWait 和 expected_conditions 来有效等待元素加载，这样可以提高稳定性。

3. 切换回主文档：

   • 在完成对 iframe 中元素的操作后，使用 driver.switch_to.default_content() 切换回主文档，以便继续操作其他页面元素。

4. 处理嵌套 iframe：

   • 如果 iframe 中还有其他 iframe，则需要多层次地切换。

        同时可以使用 Python 的 Selenium 库来修改网页元素的 display 属性，使其在 block 和 none 之间切换。比如CSNDN上面的点赞，就是由两个img标签构成（未点赞和点赞两个状态的图标），一个img标签的display属性是block，另一个img标签的display属性是none。以下是一个简单的示例：

from selenium import webdriver
from selenium.webdriver.common.by import By
import time

# 设置 WebDriver 的路径（例如 ChromeDriver）
driver_path = '/path/to/chromedriver'  # 请替换为你的 chromedriver 路径

# 启动 Chrome 浏览器
driver = webdriver.Chrome(executable_path=driver_path)

# 打开一个网页（例如本地 HTML 文件）
driver.get('file:///path/to/your/html/file.html')  # 请替换为你的 HTML 文件路径

# 找到要操作的元素
element = driver.find_element(By.ID, 'myDiv')

# 初始显示状态
print(f"初始 display 属性: {element.value_of_css_property('display')}")

# 切换显示状态
def toggle_display():
    if element.value_of_css_property('display') == 'none':
        driver.execute_script("arguments[0].style.display = 'block';", element)
    else:
        driver.execute_script("arguments[0].style.display = 'none';", element)

# 切换显示状态几次
for _ in range(5):
    toggle_display()
    print(f"当前 display 属性: {element.value_of_css_property('display')}")
    time.sleep(1)

# 关闭浏览器
driver.quit()

在这个示例中：

1. 使用 webdriver.Chrome 启动 Chrome 浏览器，并打开一个本地 HTML 文件。
2. 使用 find_element 找到要操作的元素（通过 ID）。
3. 使用 value_of_css_property 获取当前的 display 属性。
4. 使用 driver.execute_script 执行 JavaScript 来切换 display 属性。
5. 循环切换显示状态，并在每次切换后打印当前的 display 属性。