Automate email settings with JavaScript

https://unsplash.com/photos/Ya3FqJdKVaw Photo by Samuele Errico Piccarini

In my previous article I described how to use JavaScript in the browser console to get tedious tasks on the web much faster done. Of course this approach is limited. A way to go much further and beyond is to use a automation framework like Selenium. In this article I show how flexible and fast you can program a script that helps you save a lot of time.

➡️ Github Repo is available here ⬅️

📄 Table of contents

• The problem
• How to automate with Selenium webdriver
• Using it on clicking SPAM checkboxes on meetup.com
  • Setup
  • Going to the settings
  • Identify the elements and iterate over them
• See the result in Youtube

"The first rule of any technology used in a business is that automation applied to an efficient operation will magnify the efficiency. The second is that automation applied to an inefficient operation will magnify the inefficiency." - Bill Gates

The problem

The Meetup.com page requires me to check on/off each checkbox for an email notification of each group.

I don't waste my time clicking through all my groups. Meetup.com offers an option to disable all notifications, but I want to receive updates from some selected groups.
Another thing is that they have "Reminders", that require even more clicking with a dropdown menu. This dropdown menu can't even be handled by the console code, that I have shown in the previous article.

Therefore I decided to write an automated script that does all that for me.

How to automate with Selenium webdriver

Selenium allows to use a webdriver to go through the browser and performs actions, that a human being could also do (like clicking on elements).

The process of automating is simple:

• find the element with the inspector in your browser
  

• get the element with driver.findElement

• perform actions on that element with .then (promises in JS) or functions from the framework like .click()

• after performing the tasks, be sure to driver.quit(); to end the driver

Using it on clicking SPAM checkboxes on meetup.com

Setup

In this example I am using the Selenium webdriver.

The setup in Node.js is pretty easy:

var webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

var driver = new webdriver.Builder().forBrowser('chrome').build();
driver.manage().window().maximize();

Going to the settings

To get to the notifications section I simply go to their login page, send my credentials to log in and click all the way to the settings.

driver.get('https://secure.meetup.com/login/');

var mail = driver.findElement(webdriver.By.id('email'));
var pass = driver.findElement(webdriver.By.id('password'));

mail.sendKeys(cred.cred.user);
pass.sendKeys(cred.cred.pass);

driver.findElement(webdriver.By.name('submitButton')).click();
driver
    .findElement(
        webdriver.By.className(
            'valign--middle display--none atMedium_display--inline'
        )
    )
    .click();
driver.findElement(webdriver.By.xpath('//a[text()="Settings"]')).click();
driver.findElement(webdriver.By.xpath('//a[text()="Email Updates"]')).click();

Identify the elements and iterate over them

I identify all checkboxes and dropdowns and call a function (clickingAll) on each element.

const list = driver.findElements(
    webdriver.By.xpath('//li[@class="list-item"]/a')
);

list.then(function(elements) {
    var links = elements.map(elem => {
        return elem.getAttribute('href');
    });
    promise.all(links).then(linkRefs => {
        linkRefs.forEach(element => {
            driver.navigate().to(element);
            clickingAll();
        });
    });
});

The clickingAll() function actually clicks the elements and tests if the boxes are already unchecked (since we don't want to simply click everything, but rather uncheck all boxes).

var clickingAll = () => {
    driver
        .findElements(
            webdriver.By.xpath('//i[@class="icon-s icon-checkbox pseudocheckbox "]')
        )
        .then(elements => {
            elements.map(elem => {
                elem.getAttribute('aria-checked').then(check => {
                    if (check === 'true') {
                        elem.click();
                    }
                });
            });
        });
    driver
        .findElement(webdriver.By.xpath('//select[@class="j-selectbox"]'))
        .click();
    driver
        .findElement(webdriver.By.xpath('//option[@value="NO_RECEIVE"]'))
        .click();

    try {
        driver
            .findElement(webdriver.By.xpath('//option[@value="OFF]'))
            .then(null, err => {
                if (err) {
                    return false;
                }
            })
            .click();
    } catch (e) {
        return false;
    }
    driver.navigate().back();
};

See the result on Youtube

If you gained something from this article let me know with a comment or heart. Make sure to follow for more :)