如何让Webscraper自动输入城市并选择下拉框中的半径？

Webscraper（浏览器扩展）完全支持这类需要先触发交互（填输入框、选下拉框）再抓取内容的场景，以下是具体配置流程：

1. 初始化站点地图 #

• 打开Webscraper扩展，点击「Create new sitemap」，输入站点名称（比如Alberta-Chiropractors），填入目标URL：https://chiropractic.ca/find-a-chiro/alberta/，点击「Start」进入可视化编辑器。

2. 添加前置交互动作（核心步骤） #

要先完成城市输入、半径选择，再触发搜索：

• 添加城市输入选择器：点击「Add new selector」，选择Input类型，命名为city-input。点击页面上的城市搜索输入框绑定选择器，在「Value」字段填入目标城市（比如Edmonton）。
• 添加半径下拉选择器：再添加一个Input类型选择器，命名为radius-select。点击半径下拉框，右键检查元素找到对应option的value属性（比如50公里对应50），把这个值填到「Value」字段。
• 添加搜索触发选择器：添加Element click类型选择器，命名为trigger-search。点击页面上的搜索按钮（比如带「Search」字样的按钮）绑定选择器。
• 调整选择器顺序：把city-input和radius-select拖到trigger-search上方，确保Webscraper先填充内容再触发搜索。

3. 定义数据抓取选择器 #

• 添加Element类型选择器，命名为chiropractor-item，选择单个脊椎按摩师的卡片父容器（右键检查元素找到包裹单条信息的DOM节点），勾选「Multiple」（抓取多个条目）。
• 在chiropractor-item下添加子选择器抓取具体字段：
  • name：Text类型，选择技师姓名元素
  • clinic-name：Text类型，选择诊所名称元素
  • address：Text类型，选择地址元素
  • phone：Text类型，选择电话元素
  • 按需添加邮箱、网站等其他字段

4. 配置分页 #

如果搜索结果有多页：

• 添加Element click类型选择器，命名为next-page，选择页面上的「Next」按钮。设置「Multiple」为false，「Click type」选「Click more」，勾选「Click until element disappears」（直到下一页按钮消失停止）。
• 把next-page拖到所有数据选择器下方，确保抓完当前页再切换下一页。

5. 测试与运行 #

• 点击编辑器的「Test sitemap」，验证单页是否能正确触发搜索、抓取数据。
• 测试通过后点击「Scrape」，选择「Start scraping」，Webscraper会自动完成交互、分页抓取，最后导出为CSV/Excel表格。

额外提示 #

• 若要批量抓取多个城市，可使用Webscraper的变量功能：在站点地图设置里添加city变量，将city-input的「Value」设为{{city}}，运行时批量输入城市列表即可。
• 避免过快抓取，保持默认延迟，降低被网站反爬拦截的概率。
• 选择器尽量用稳定的类名、ID组合，避免依赖动态生成的DOM属性。

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