hi~ 今天给大家分享一下，浏览器自动化过程中，不同浏览器之间的配置项的设置吧~

chrome

chrome 目前有两个自动化库可以使用，一个是puppeteer，一个是selenium。先看关于puppeteer的配置：

puppeteer

code

const puppeteer = require('puppeteer');
puppeteer.launch(
{
    headless: true, 
    timeout: 30 * 1000,
    devtools: true, 
    slowMo: 200,
    defaultViewport: null,
    args: ['--start-maximized'],
    ignoreDefaultArgs: ['--enable-automation'],
    executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
}
).then(async browser => {
const page = await browser.newPage();
try {
     await page.setViewport({
         width: 1920,
         height: 960,
     });
    await page.goto('xxx');
    await page
        .waitForSelector('xxx')
        .then(async () => {
            try {
                const setting = await page.$('.xxx');
                await setting.hover({
                    delay: 1500
                })
            } catch (e) {
                console.log('执行失败 error: ', e)
            }
        });

} catch (error) {
    console.log('error: ', error);
}
});

这里面主要就是需要注意的就是 executablePath 这个参数的配置，他是直接唤醒你本地的 chrome.exe 文件，如果这个不配置，那么他就会取找安装的包中的默认浏览器。chromium。这个看个人喜好了~

selenium

selenium 配置其实大同小异了： code

require('chromedriver');
const { Builder } = require('selenium-webdriver');
const { Options } = require('selenium-webdriver/chrome');

let options = new Options();
options.addArguments('--user-data-dir=[path]') //  设置用户数据文件夹
options.addArguments('--headless') //  无头模式
options.addArguments('--disable-gpu') //  禁用GPU加速
options.addArguments('--start-maximized')// 浏览器最大化
options.addArguments('--window-size=1280x1024') //  设置浏览器分辨率（窗口大小）
options.addArguments('log-level=3') //  日志记录级别
// info(default) = 0
// warning = 1
// LOG_ERROR = 2
// LOG_FATAL = 3
options.addArguments('--user-agent=""') //  设置请求头的User-Agent
options.addArguments('--incognito') //  隐身模式（无痕模式）
options.addArguments('--hide-scrollbars') //  隐藏滚动条, 应对一些特殊页面
options.addArguments('--disable-javascript') //  禁用javascript
options.addArguments('--blink-settings=imagesEnabled=false') //  不加载图片, 提升速度

/*--已废弃--*/
options.addArguments('--disable-infobars') //  禁用浏览器正在被自动测试程序控制的提示
options.addArguments('--user-data-dir=C:\\Users\\username\\AppData\\Local\\Google\\Chrome\\User Data');
driver = new Builder().setChromeOptions(options).forBrowser('chrome').build();

selenium中需要注意的就是它的默认启动项 --user-data-dir 的路径配置与puppeteer 有些区别，他的这个路径是指向性访问拥有这个data属性的浏览器，这个data中可以设置你想要的cookie，session，local Storage等等。还是很强大的！

Edge

这个浏览器目前是微软刚推出的，是chrome内核。 code

const { Builder, By, Key, until } = require('selenium-webdriver');
const edge = require('selenium-webdriver/edge');
const edgedriver = require('msedgedriver');   //If this driver is already on your system, then no need to install using npm.

(async function () {  
    try {
        let options = new edge.Options()
            .addArguments('-headless')
        let service = await new edge.ServiceBuilder(edgedriver.path);
        let driver = await new Builder()
            .forBrowser('MicrosoftEdge')
            .setEdgeOptions(options)
            .setEdgeService(service).build();

    await driver.get('xxxxx')
    // await driver.manage().window().maximize();
    await driver.sleep(5000)
    let button = await driver.wait(until.elementLocated(By.className('xxxxx')), 2000);
    const actions = driver.actions({ bridge: true });
    actions.move({ origin: button }).perform();
    await driver.sleep(1000)
    let buttonsecai1 = await driver.findElements({ className: 'xxxxx' })
    await buttonsecai1[2].click()
    await driver.sleep(2000)
    const results = await driver.executeScript(function () {
        const data1 = localStorage.getItem('xxxxx');
        var data = JSON.parse(data1);
        var result = data.block.type_bottom;
        return result
    })
    await driver.sleep(1000)
    await driver.quit();
} catch (e) {
    await driver.quit();
    console.log('执行失败 error: ', e)
}
})()

这里要注意的就是他的驱动名称目前是： .forBrowser('MicrosoftEdge') 单独的设置edge是不可以的。最后会提示你找不到此模块。然后，这块默认的路径就是去找安装模块下的路径就好，但是路径这块一定要设置，不然会报错，找不到驱动，打不开浏览器的错误。

const edgedriver = require('msedgedriver');

let service = await new edge.ServiceBuilder(edgedriver.path);

因为都是selenium，所以你可以添加你想要的属性，当然也是通过 options.addArguments() 这样的方式来添加拉~

firefox

火狐浏览器应该是目前除了chrome，开发人员用的第二多的浏览器了，这块浏览器看比手机品牌华为，别的浏览器上发现不了的问题，这个浏览器上暴露无遗啊~ code

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

let options = new firefox.Options()
    .setProfile('C:\\Users\\xxxxxx\\AppData\\Local\\Mozilla\\Firefox\\Profiles')
    .setBinary('C:\\Program Files\\Mozilla Firefox\\firefox.exe')
    .addArguments('-headless')
let driver = new webdriver.Builder()
    .forBrowser('firefox')
    .setFirefoxOptions(options)
    .build();

(async function () {  
    try {
        await driver.get('xxxxxx')
        // await driver.manage().window().maximize();
        await driver.sleep(5000)
        let button = await driver.wait(until.elementLocated(By.className('xxxxxx')), 2000);
        const actions = driver.actions({ bridge: true });
        actions.move({ origin: button }).perform();
        await driver.sleep(1000)
        let buttonsecai1 = await driver.findElements({ className: 'xxxxxx' })
        await buttonsecai1[2].click()
        await driver.sleep(2000)
        const results = await driver.executeScript(function () {
            const data1 = localStorage.getItem('xxxxxx');
            var data = JSON.parse(data1);
            var result = data.block.type_bottom;
            return result
        })
          await driver.sleep(1000)
          await driver.quit();
      } catch (e) {
          await driver.quit();
          console.log('执行失败 error: ', e)
      }
  })()
  

也是一样，安装对应的依赖包，配置你所需要启动的依赖项，设置路径等，但是firefox不同于其他浏览器，它的启动项，比较特殊，需要设置文件路径以及启动程序 setProfile & setBinary 如果不设置，就会报错，找不到对应的Binary 或者 profile。

IE

虽然现在用这款浏览起的人，少之又少，但是不免还会存在少量的用户。所以这边还是讲一下。 code

const { Builder, By, Key, until } = require('selenium-webdriver');
const webdriver = require('selenium-webdriver');
const ie = require('selenium-webdriver/ie');
const iedriver = require('iedriver');   
let options = new ie.Options()
    .addArguments('-headless')

var driver = new webdriver.Builder()
    .setIeOptions(options)
    .forBrowser('internet explorer')
    .build();

(async function () {  
    try {
        await driver.get('xxxxxxx')
        // await driver.manage().window().maximize();
        await driver.sleep(10000)
        let button = await driver.wait(until.elementLocated(By.className('xxxxxxx')), 2000);
        const actions = driver.actions({ bridge: true });
        actions.move({ origin: button }).perform();
        await driver.sleep(1000)
        let buttonsecai1 = await driver.findElements({ className: 'xxxxxxx' })
        await buttonsecai1[2].click()
        await driver.sleep(2000)
        const results = await driver.executeScript(function () {
            const data1 = localStorage.getItem('xxxxxxx');
            var data = JSON.parse(data1);
            var result = data.block.type_bottom;
            return result
        })
    await driver.sleep(1000)
    await driver.quit();
} catch (e) {
    await driver.quit();
    console.log('执行失败 error: ', e)
}
})()

这块需要注意的就是，他的驱动名称是 .forBrowser('internet explorer') 路径到可不必设置，但是驱动的时候，需要注意一个可能存在的问题，就是权限。可能有些小伙伴不是很清楚，看这里👇

在安全设置里面，这几个选项一定要全都勾选了，才可以，不然就没法驱动了~ 切记！！！

好了 以上就是关于不同浏览器的不同配置项的整理了，当然这是基于nodejs 开发的。为什么选nodejs呀，因为尝到了异步的甜头。就很虚浮！后期再整理关于selenium 和 puppeteer 之间，鼠标事件的玩儿法吧。两者的玩法不同，各有千秋~

走过路过，点个赞吧。给您比个心 ❤