End-to-End (E2E) code samples: searching medium

Selenium_with_Jest.js

/* eslint-env jest */
/* eslint-disable padded-blocks, no-unused-expressions, no-unused-vars */
/**
 * here we import the selenium module
 */
const webDriver = require('selenium-webdriver');

/**
 * these are the main functionalities of webdriver
 * By allows us to find elements
 * Key allows us to simulate keyboard keys
 * until helps us to wait until a certain criteria is met (for example element is visible)
 */
const { By, Key, until } = webDriver;

/**
 * here we create the webdriver, and tell it to open the browser.
 * You should already have installed chrome-driver.
 */
const driver = new webDriver.Builder().forBrowser('chrome').build();

const perform = async done => {
  /**
   * here we redirect the medium search
   */
  await driver.get('https://medium.com/search');

  /**
   * then we find the search input and change the values, and finally press enter button
   */
  const searchElement = await driver.findElement(
    By.css('form [type="Search"]'),
  );
  await searchElement.sendKeys('Izadmehr');
  await searchElement.sendKeys(Key.ENTER);
  const searchValue = await searchElement.getAttribute('value');

  /**
   * here we added a simple jest scenario
   * we expect the value of input element, to have changed to correctly
   */
  expect(searchValue).toEqual('Izadmehr');

  /**
   * here we find describe the css selector to my profile
   * then we wait, until this element is located,
   * and finally click it
   */
  const usernameLink = By.css('[data-user-id="43f4a4c78443"]');
  const usernameElement = driver.wait(until.elementLocated(usernameLink));
  await usernameElement.click();

  const avatarLink = By.css('img[alt="Mojtaba Izadmehr"]');
  const avatarElement = driver.wait(until.elementLocated(avatarLink));
  expect(await avatarElement.getAttribute('height')).toBeTruthy();
  /**
   * Here our test process is done, and we should be successfully redirected to my profile page
   * We can write some test scenarios based on this condition
   */
  done();
};

/**
 * Here we have our scenario
 */
describe('medium search', () => {
  it(
    'should successfully find my profile',
    done => {
      perform(done);
    },
    20000,
  );
});