Automate email settings with JavaScript

Daniel Deutsch
Jul 21, 2017 · 3 min read
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

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

UX of Email Updates

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.

Automated Script

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
Identify elements through the chrome inspector
  • 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 :)

DevelopersRising

Articles covering entrepreneurship, tech, programming, innovation, ideas, future, success and businesses. If you want to submit your story or become a writer, send a message to dd@createdd.com

)

Daniel Deutsch

Written by

Business Law and Machine Learning. Pushing the limits to make the world a better place. Open for Projects of any kind.

DevelopersRising

Articles covering entrepreneurship, tech, programming, innovation, ideas, future, success and businesses. If you want to submit your story or become a writer, send a message to dd@createdd.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade