Just mucking about and learning javascript

learning_react_forms.js

// Will be parameters
var PARAM_EVENT_NAME = "My Event Name"
var PARAM_LOCATION = "Mountain View, CA"
var PARAM_DESCRIPTION = "My Description"
var PARAM_START_DATE = "12/08/2019"
var PARAM_START_TIME = "7:00 PM"
var PARAM_END_DATE = "12/08/2019"
var PARAM_END_TIME = "9:00 PM"

// Xpaths
var XP_BUTTON_CREATE_EVENT = "/html/body/div[1]/div[3]/div[1]/div/div[1]/div/div/div[3]/div/div/a"
var XP_BUTTON_PRIVATE_EVENT = "/html/body/div[1]/div[3]/div[3]/div/div/div/ul/li[2]/a"
var XP_INPUT_EVENT_NAME = "/html/body/div[14]/div[2]/div/div/div/div[2]/div/div/div[1]/div/div/div[1]/div[2]/div[2]/div[2]/label/input"
var XP_INPUT_LOCATION = "/html/body/div[14]/div[2]/div/div/div/div[2]/div/div/div[1]/div/div/div[1]/div[2]/div[3]/div[2]/div/span/span/label/input"
//var XP_INPUT_DESCRIPTION = "/html/body/div[14]/div[2]/div/div/div/div[2]/div/div/div[1]/div/div/div[1]/div[2]/div[4]/div[2]/div/div/div/div/div/div/div/div/div"
//var XP_INPUT_DESCRIPTION = "/html/body/div[14]/div[2]/div/div/div/div[2]/div/div/div[1]/div/div/div[1]/div[2]/div[4]/div[2]/div/div/div/div/div[1]/div"
var XP_INPUT_DESCRIPTION = "/html/body/div[14]/div[2]/div/div/div/div[2]/div/div/div[1]/div/div/div[1]/div[2]/div[4]/div[2]/div/div/div/div/div[2]/div/div/div/div/span/br"
var XP_INPUT_START_DATE = "/html/body/div[14]/div[2]/div/div/div/div[2]/div/div/div[1]/div/div/div[1]/div[2]/div[5]/div[1]/div[2]/div/div/span/label/input"
var XP_INPUT_START_TIME = "/html/body/div[14]/div[2]/div/div/div/div[2]/div/div/div[1]/div/div/div[1]/div[2]/div[5]/div[1]/div[2]/div/div/div/span/span/label/input"
var XP_INPUT_END_DATE = "/html/body/div[14]/div[2]/div/div/div/div[2]/div/div/div[1]/div/div/div[1]/div[2]/div[5]/div[2]/div[2]/div/div/span/label/input"
var XP_INPUT_END_TIME = "/html/body/div[14]/div[2]/div/div/div/div[2]/div/div/div[1]/div/div/div[1]/div[2]/div[5]/div[2]/div[2]/div/div/div/span/span/label/input"
var XP_SAVE_DRAFT = "/html/body/div[14]/div[2]/div/div/div/div[3]/table/tbody/tr/td[2]/button[1]"

// Functions
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
function fillEventField(event_field_xpath, event_name) {
  var field = getElementByXpath(event_field_xpath)
  var lastValue = field.value
  field.value = event_name
  var event = new Event('input', { bubbles: true });
  var tracker = field._valueTracker
  if (tracker) {
    tracker.setValue(lastValue)
  }
  field.dispatchEvent(event)
}
function fillDescription(event_description) {
  // This doesn't do what I want it to do.
  // I'm not sure why.
  var placeholder_tag = getElementByXpath(XP_INPUT_DESCRIPTION)
  var replacement_tag = document.createElement('span')
  replacement_tag.setAttribute("data-text", "true")
  replacement_tag.innerHTML = event_description
  placeholder_tag.parentNode.replaceChild(replacement_tag, placeholder_tag)
}

//Script
getElementByXpath(XP_BUTTON_CREATE_EVENT).click()
await sleep(1000)
getElementByXpath(XP_BUTTON_PRIVATE_EVENT).click()
await sleep(5000)
fillEventField(XP_INPUT_EVENT_NAME, PARAM_EVENT_NAME)
await sleep(500)
fillEventField(XP_INPUT_LOCATION, PARAM_LOCATION)
await sleep(500)
fillDescription(PARAM_DESCRIPTION)
//getElementByXpath(XP_INPUT_DESCRIPTION).textContent = PARAM_DESCRIPTION
//fillEventField(XP_INPUT_DESCRIPTION, PARAM_DESCRIPTION)
await sleep(500)
fillEventField(XP_INPUT_START_DATE, PARAM_START_DATE)
await sleep(500)
fillEventField(XP_INPUT_START_TIME, PARAM_START_TIME)
await sleep(500)
fillEventField(XP_INPUT_END_DATE, PARAM_END_DATE)
await sleep(500)
fillEventField(XP_INPUT_END_TIME, PARAM_END_TIME)
//await sleep(500)
//getElementByXpath(XP_SAVE_DRAFT).click()