如何移除弹窗遮罩？API批量搜索时遇页面交互阻断问题

• 需将从API获取的一系列产品名称重复输入至「Main Search Bar」（主搜索栏）
• 首次访问页面时会出现弹窗遮罩，导致页面其他元素无法响应操作

主搜索栏示意图
页面元素示意图
弹窗遮罩示意图

1. 先处理弹窗遮罩 #

在执行搜索操作前必须先解决弹窗问题，常用两种方式：

• 定位关闭按钮点击：通过元素选择器（id/class/XPath）找到弹窗的关闭控件（比如「X」或「关闭」按钮），模拟点击。以Selenium为例：

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

driver = webdriver.Chrome()
driver.implicitly_wait(10) # 等待弹窗加载
# 替换为实际关闭按钮的选择器
close_btn = driver.find_element(By.XPATH, "//button[contains(@class, 'popup-close')]")
close_btn.click()

• JS强制移除/隐藏：如果找不到关闭按钮，用JS直接操作DOM：

// 移除弹窗容器
document.querySelector('.popup-wrap').remove();
// 或隐藏遮罩层
document.querySelector('.page-mask').style.display = 'none';

2. 循环输入产品名称 #

弹窗处理完成后，遍历API返回的产品列表，逐个输入搜索：

# 假设products是API返回的产品列表
products = ["产品A", "产品B", "产品C"]
search_bar = driver.find_element(By.ID, "main-search-input") # 替换为实际搜索栏选择器

for product in products:
    search_bar.clear()
    search_bar.send_keys(product)
    search_bar.submit() # 执行搜索（或点击搜索按钮）
    driver.implicitly_wait(5) # 等待搜索结果加载

3. 关键注意点 #

• 用显式等待替代隐式等待（如Selenium的WebDriverWait），适配动态加载的弹窗；
• 根据你使用的自动化工具（Playwright/Cypress等）调整语法，核心逻辑不变；
• 确保每次输入前清空搜索栏，避免残留内容影响结果。

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