如何使用Selenium+NodeJS自动化操作日期选择器并选中日期范围

你当前操作的是Mobiscroll框架的日期范围选择组件，完成月份切换后，按以下逻辑实现日期范围选中即可：

操作前提 #

核心实现步骤 #

• 切换到目标月份后，先定位所有可选日期元素，有效日期的类名为.mbsc-cal-day-text，需排除带mbsc-disabled类的禁用日期
• 先点击起始日期对应的元素，再点击结束日期对应的元素，组件会自动完成范围选中
• 建议添加显式等待逻辑，避免元素未渲染完成导致点击失效

改进后完整代码 #

const { By, Key, Builder, until } = require('selenium-webdriver');
require('chromedriver');

// 封装选择日期的通用方法
async function selectDate(driver, targetDate) {
  // 等待日期元素加载完成
  await driver.wait(until.elementsLocated(By.css('.mbsc-cal-day-text:not(.mbsc-disabled)')), 10000);
  const dateElements = await driver.findElements(By.css('.mbsc-cal-day-text:not(.mbsc-disabled)'));
  for (let el of dateElements) {
    const dateText = await el.getText();
    if (dateText === String(targetDate)) {
      await el.click();
      break;
    }
  }
}

async function datePickerTest(){
  const driver = await new Builder().forBrowser('chrome').build();
  // 设置隐式等待
  await driver.manage().setTimeouts({implicit: 10000});

  try {
    await driver.get('https://www.carnextdoor.com.au/search');

    await driver.findElement(By.name('location')).clear();
    let city = 'Sydney Airport, Airport Dr, Sydney, New South Wales 2020, Australia';
    await driver.findElement(By.name('location')).sendKeys(city);
    await driver.findElement(By.name('location')).sendKeys(Key.RETURN);

    // 打开日期选择器
    await driver.findElement(By.css('.cyp-datetime-picker-modal')).click();

    // 切换7次月份到目标月份
    for(let i=0; i<7; i++) {
      await driver.findElement(By.css('.mbsc-cal-next-m')).click();
    }

    // 选择日期范围：15号作为开始日期，20号作为结束日期
    await selectDate(driver, 15);
    await selectDate(driver, 20);

    // 可在此处添加确认选择的操作，比如点击确定按钮
  } catch (err) {
    console.error('操作失败: ', err)
  } finally {
    await driver.quit();
  }
}

datePickerTest();

注意事项 #

• 如果需要跨月选择范围，先选完起始日期后再切换到结束日期所在月份，再点击结束日期即可
• 部分日期选择器需要点击「确认」按钮才能完成提交，选中范围后可对应添加确认操作

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