Today I would like to share with you the Settings of configuration items between different browsers during the browser automation process

chrome

Chrome currently has two automation libraries available, Puppeteer and Selenium. Let’s start with the configuration of 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(' failed to execute error: ', e)}}); } catch (error) { console.log('error: ', error); }});Copy the code

The main thing to watch out for is the configuration of the executablePath parameter, which wakes up your local chrome.exe file. If it is not configured, it will find the default browser in the installed package. Chromium. This depends on personal preference ~

selenium

The Selenium configuration is essentially the same: Code

require('chromedriver'); const { Builder } = require('selenium-webdriver'); const { Options } = require('selenium-webdriver/chrome'); let options = new Options(); Options. addArguments('--user-data-dir=[path]') // Set user data folder options.addArguments('--headless') // Headless mode Options. addArguments('--disable-gpu') // Disable GPU acceleration options.addArguments('--start-maximized')// Browser maximization Options. addArguments('--window-size=1280x1024') // Set browser resolution (window size) options.addArguments('log-level=3') // Log level // info(default) = 0 // warning = 1 // LOG_ERROR = 2 // LOG_FATAL = 3 options.addArguments('--user-agent=""') // Set user-agent options.addArguments('--incognito') for request headers options. AddArguments ('-- hides-scrollbars ') // Hide scrollbars, For some special pages options. AddArguments ('--disable-javascript') // disable javascript Options. addArguments('--blink-settings=imagesEnabled=false') // Do not load images, /*-- deprecated --*/ options.addArguments('-- disablet-infobars ') // Disable browser notifications that are being controlled by an automated test program options.addArguments('--user-data-dir=C:\\Users\\username\\AppData\\Local\\Google\\Chrome\\User Data'); driver = new Builder().setChromeOptions(options).forBrowser('chrome').build();Copy the code

Note that the path configuration for Selenium’s default startup, user-data-dir, is a little different from puppeteer’s. The path allows access to the browser that owns the data property, which allows you to set the cookie, session, and other attributes you want. Local Storage and so on. Still very powerful!

Edge

The browser is currently just launched by Microsoft and is the chrome kernel. 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(' failed to execute error: ', e)}})()Copy the code

Note that the driver name is currently:.forbrowser (‘MicrosoftEdge’). Setting edge alone is not possible. You will be prompted that the module cannot be found. Then, the default path is to find the path under the installation module, but the path must be set, otherwise error will be reported, can not find the driver, can not open the browser error.

const edgedriver = require(‘msedgedriver’);

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

Since it’s all selenium, you can add any properties you want, also using options.addarguments ()

firefox

Firefox is the second most popular browser used by developers, after Chrome. This browser is more popular than Huawei’s

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(' failed to execute error: ', e)}})()Copy the code

Again, install the corresponding dependencies, configure the dependencies you need to start, set the path, etc. Firefox is different from other browsers, it is special, you need to set the file path and the launcher setProfile & setBinary, if you do not set this, you will get an error. No Binary or profile was found.

IE

Although the current use of this browser, few and few, but there will inevitably exist a small number of users. So let’s go over here. 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(' failed to execute error: ', e)}})()Copy the code

The important thing to note here is that his driver name is.forBrowser(‘internet explorer’)Path to can not be set, but when the driver, need to pay attention to a possible problem, is the permission. For those of you who are not very clear, see here 👇

In the security Settings, these options must be all ticked, can, otherwise can not drive ~ remember!!

So that’s all about the different configuration items for different browsers, based on NodeJS of course. Why nodeJS? Because it tastes the sweetness of asynchrony. Is very vain! I will sort out how to play the mouse event between Selenium and Puppeteer later. The two play different, each has its merits ~

Pass by, give it a thumbs-up. My heart goes out to you