From 800625e8a1e1e0c1e0518a9e086fd668c01872ce Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Fri, 28 Feb 2020 08:34:28 -0800
Subject: [PATCH] improve element annotation

---
 .../components/dangerous_delete_widget.tsx    |   3 +-
 .../components/export_account_panel.tsx       |   3 +-
 frontend/account/index.tsx                    |  11 +-
 .../account/labs/labs_features_list_ui.tsx    |   3 +-
 frontend/account/request_account_export.ts    |   5 +-
 frontend/controls/axis_display_group.tsx      |  14 +--
 frontend/controls/key_val_edit_row.tsx        |   2 +
 frontend/controls/move/bot_position_rows.tsx  |   2 +-
 frontend/controls/move/jog_controls_group.tsx |   2 +-
 .../controls/move/motor_position_plot.tsx     |  24 ++---
 frontend/controls/move/settings_menu.tsx      |   2 +-
 frontend/controls/move/step_size_selector.tsx |   7 +-
 frontend/controls/peripherals/index.tsx       |  10 +-
 frontend/controls/pin_form_fields.tsx         |   1 +
 .../__tests__/filter_readings_test.ts         |  14 +--
 .../__tests__/location_selection_test.tsx     |   8 +-
 .../__tests__/sensor_readings_test.tsx        |   8 +-
 .../sensor_readings/filter_readings.ts        |   6 +-
 .../controls/sensor_readings/interfaces.ts    |   6 +-
 .../sensor_readings/location_selection.tsx    |  14 +--
 .../sensor_readings/sensor_readings.tsx       |  16 +--
 .../sensor_readings/time_period_selection.tsx |   1 +
 frontend/controls/sensors/index.tsx           |  10 +-
 .../controls/webcam/__tests__/show_test.tsx   |   2 +-
 frontend/controls/webcam/edit.tsx             |   3 +
 frontend/controls/webcam/show.tsx             |   5 +-
 .../farm_designer/farm_designer_panels.scss   |   4 +-
 frontend/demo/demo_iframe.tsx                 |   7 +-
 frontend/devices/actions.ts                   |   4 +-
 .../__tests__/pin_guard_input_group_test.tsx  |   2 +-
 .../__tests__/pin_number_dropdown_test.tsx    |   2 +-
 .../components/farmbot_os_settings.tsx        |   8 +-
 .../components/fbos_settings/board_type.tsx   |  14 ++-
 .../fbos_settings/camera_selection.tsx        |  14 ++-
 .../fbos_settings/change_ownership_form.tsx   |   1 +
 .../fbos_settings/factory_reset_row.tsx       |   7 +-
 .../fbos_settings/fbos_button_row.tsx         |   1 +
 .../components/fbos_settings/fbos_details.tsx |   2 +-
 .../firmware_hardware_status.tsx              |   1 +
 .../components/fbos_settings/interfaces.ts    |   2 +-
 .../fbos_settings/power_and_reset.tsx         |   4 +-
 .../devices/components/hardware_settings.tsx  |   2 +
 .../hardware_settings/calibration_row.tsx     |   1 +
 .../hardware_settings/danger_zone.tsx         |   1 +
 .../components/hardware_settings/motors.tsx   |   2 +-
 .../hardware_settings/pin_guard.tsx           |  10 +-
 frontend/devices/components/interfaces.ts     |   2 +-
 .../devices/components/lockable_button.tsx    |   4 +-
 .../components/pin_guard_input_group.tsx      |   4 +-
 .../devices/connectivity/connectivity.tsx     |   4 +-
 frontend/devices/connectivity/diagnosis.tsx   |   2 +-
 frontend/devices/connectivity/diagram.tsx     |   5 +-
 frontend/devices/must_be_online.tsx           |   2 +-
 .../pin_binding_input_group_test.tsx          |   8 +-
 .../pin_bindings/pin_binding_input_group.tsx  |   3 +-
 .../devices/pin_bindings/pin_bindings.tsx     |   4 +-
 .../pin_bindings/tagged_pin_binding_init.tsx  |   1 +
 frontend/error_boundary.tsx                   |   2 +-
 .../farm_events/edit_fe_form.tsx              |  28 ++---
 .../farm_events/farm_event_repeat_form.tsx    | 102 +++++++++---------
 .../farm_designer/farm_events/farm_events.tsx |   1 +
 frontend/farm_designer/index.tsx              |  14 +--
 .../farm_designer/map/easter_eggs/bugs.tsx    |   3 +-
 .../farmbot/__tests__/bot_figure_test.tsx     |   6 +-
 .../layers/farmbot/__tests__/index_test.tsx   |   9 +-
 .../map/layers/farmbot/bot_figure.tsx         |   8 +-
 .../map/layers/farmbot/index.tsx              |   4 +-
 .../map/layers/images/map_image.tsx           |  10 +-
 frontend/farm_designer/map_size_setting.tsx   |   1 +
 frontend/farm_designer/move_to.tsx            |  10 +-
 .../plants/__tests__/plant_panel_test.tsx     |   2 +-
 frontend/farm_designer/plants/add_plant.tsx   |   2 +-
 .../farm_designer/plants/crop_catalog.tsx     |   1 +
 frontend/farm_designer/plants/crop_info.tsx   |  15 +--
 .../plants/grid/__tests__/plant_grid_test.tsx |   7 +-
 .../farm_designer/plants/grid/plant_grid.tsx  |  18 ++--
 .../plants/openfarm_search_results.tsx        |  54 +++++-----
 .../farm_designer/plants/plant_inventory.tsx  |   2 +-
 frontend/farm_designer/plants/plant_panel.tsx |  17 +--
 .../farm_designer/plants/select_plants.tsx    |   4 +
 .../__tests__/point_group_sort_test.ts        |   4 +-
 .../point_groups/criteria/add.tsx             |  15 ++-
 .../point_groups/criteria/component.tsx       |  18 ++--
 .../point_groups/criteria/show.tsx            |  59 ++++++----
 .../point_groups/group_list_panel.tsx         |   1 +
 .../__tests__/point_edit_actions_test.tsx     |   2 +-
 .../farm_designer/points/create_points.tsx    |   4 +-
 .../points/point_edit_actions.tsx             |  15 ++-
 .../farm_designer/points/point_inventory.tsx  |   2 +-
 .../farm_designer/points/weeds_inventory.tsx  |   2 +-
 .../__tests__/garden_edit_test.tsx            |   1 +
 .../__tests__/garden_snapshot_test.tsx        |   6 +-
 .../farm_designer/saved_gardens/actions.ts    |  13 +--
 .../saved_gardens/garden_edit.tsx             |   8 +-
 .../saved_gardens/garden_snapshot.tsx         |  22 ++--
 .../saved_gardens/saved_gardens.tsx           |   6 +-
 frontend/farm_designer/tools/add_tool.tsx     |   3 +
 frontend/farm_designer/tools/index.tsx        |   2 +-
 .../tools/tool_slot_edit_components.tsx       |   4 +-
 .../farm_designer/zones/zones_inventory.tsx   |   2 +-
 frontend/farmware/farmware_config_menu.tsx    |   3 +
 frontend/farmware/farmware_forms.tsx          |   3 +-
 frontend/farmware/farmware_info.tsx           |  59 +++++-----
 frontend/farmware/farmware_list.tsx           |   3 +-
 frontend/farmware/images/image_flipper.tsx    |   4 +-
 frontend/farmware/images/photos.tsx           |   3 +-
 frontend/farmware/index.tsx                   |   4 +-
 frontend/farmware/state_to_props.ts           |   6 +-
 frontend/farmware/weed_detector/config.tsx    |   3 +-
 .../farmware/weed_detector/farmbot_picker.tsx |   2 +-
 frontend/farmware/weed_detector/index.tsx     |   1 +
 frontend/folders/actions.ts                   |   4 +-
 frontend/folders/component.tsx                |  11 +-
 frontend/front_page/create_account.tsx        |  16 +--
 frontend/front_page/forgot_password.tsx       |   2 +
 frontend/front_page/front_page.tsx            |  14 ++-
 frontend/front_page/login.tsx                 |   7 +-
 frontend/front_page/resend_panel_body.tsx     |   1 +
 frontend/front_page/resend_verification.tsx   |   1 +
 frontend/front_page/terms_checkbox.tsx        |   2 +-
 frontend/help/__tests__/tour_test.tsx         |   2 +-
 frontend/help/docs.tsx                        |   8 +-
 frontend/help/tour.tsx                        |   4 +-
 frontend/help/tour_list.tsx                   |   1 +
 frontend/logs/components/filter_menu.tsx      |   9 +-
 frontend/logs/components/settings_menu.tsx    |   6 +-
 frontend/logs/index.tsx                       |  25 ++---
 frontend/nav/additional_menu.tsx              |   8 +-
 frontend/nav/index.tsx                        |  12 +--
 frontend/nav/mobile_menu.tsx                  |   2 +-
 frontend/nav/sync_button.tsx                  |   1 +
 frontend/password_reset/password_reset.tsx    |   1 +
 .../__tests__/read_only_icon_test.tsx         |   6 +-
 frontend/read_only_mode/index.tsx             |   2 +-
 .../set_active_regimen_by_name_test.ts        |   4 +-
 .../__tests__/add_button_test.tsx             |   2 +-
 .../regimens/bulk_scheduler/add_button.tsx    |   4 +-
 frontend/regimens/bulk_scheduler/index.tsx    |   4 +-
 .../regimens/bulk_scheduler/week_grid.tsx     |  10 +-
 frontend/regimens/bulk_scheduler/week_row.tsx |   1 +
 frontend/regimens/editor/active_editor.tsx    |   2 +
 frontend/regimens/editor/copy_button.tsx      |   1 +
 .../regimens/editor/regimen_name_input.tsx    |   1 +
 frontend/regimens/list/add_button.tsx         |   1 +
 frontend/regimens/list/index.tsx              |   4 +-
 frontend/regimens/list/regimen_list_item.tsx  |   5 +-
 .../regimens/set_active_regimen_by_name.ts    |   4 +-
 frontend/resources/selectors.ts               |   3 +-
 frontend/resources/selectors_by_id.ts         |   6 +-
 .../set_active_sequence_by_name_test.ts       |   4 +-
 frontend/sequences/inputs/input_unknown.tsx   |   2 +-
 .../locals_list/default_value_form.tsx        |   2 +-
 .../location_form_coordinate_input_boxes.tsx  |   2 +-
 .../locals_list/location_form_list.ts         |   6 +-
 .../sequence_editor_middle_active.tsx         |   3 +
 .../sequences/set_active_sequence_by_name.ts  |   4 +-
 frontend/sequences/step_button_cluster.tsx    |  18 ++--
 frontend/sequences/step_buttons.tsx           |   1 +
 .../step_tiles/mark_as/unpack_step.ts         |   4 +-
 .../step_tiles/tile_assertion/lua_part.tsx    |   2 +-
 .../step_tiles/tile_execute_script.tsx        |  14 +--
 .../tile_execute_script_support.tsx           |  58 +++++-----
 .../tile_move_absolute_conflict_check.tsx     |   2 +-
 .../step_tiles/tile_send_message.tsx          |  17 ++-
 frontend/sequences/step_ui/step_radio.tsx     |   2 +-
 frontend/sequences/step_ui/step_warning.tsx   |   2 +-
 frontend/sequences/test_button.tsx            |   6 +-
 frontend/session.ts                           |  16 +--
 frontend/tos_update/component.tsx             |  11 +-
 frontend/ui/back_arrow.tsx                    |   3 +-
 frontend/ui/color_picker.tsx                  |   2 +
 frontend/ui/empty_state_wrapper.tsx           |   2 +-
 frontend/ui/help.tsx                          |   2 +-
 frontend/ui/input_error.tsx                   |   2 +-
 frontend/ui/save_button.tsx                   |   3 +-
 175 files changed, 741 insertions(+), 556 deletions(-)

diff --git a/frontend/account/components/dangerous_delete_widget.tsx b/frontend/account/components/dangerous_delete_widget.tsx
index 635c050e9..09e304fe1 100644
--- a/frontend/account/components/dangerous_delete_widget.tsx
+++ b/frontend/account/components/dangerous_delete_widget.tsx
@@ -20,7 +20,7 @@ export class DangerousDeleteWidget extends
     return <Widget>
       <WidgetHeader title={this.props.title} />
       <WidgetBody>
-        <div>
+        <div className={"dangerous-delete-warning-messages"}>
           {t(this.props.warning)}
           <br /><br />
           {t(this.props.confirmation)}
@@ -42,6 +42,7 @@ export class DangerousDeleteWidget extends
               <button
                 onClick={this.onClick}
                 className="red fb-button"
+                title={t(this.props.title)}
                 type="button">
                 {t(this.props.title)}
               </button>
diff --git a/frontend/account/components/export_account_panel.tsx b/frontend/account/components/export_account_panel.tsx
index d431f0b8c..111e278f2 100644
--- a/frontend/account/components/export_account_panel.tsx
+++ b/frontend/account/components/export_account_panel.tsx
@@ -7,7 +7,7 @@ export function ExportAccountPanel(props: { onClick: () => void }) {
   return <Widget>
     <WidgetHeader title={t("Export Account Data")} />
     <WidgetBody>
-      <div>
+      <div className={"export-account-data-description"}>
         {t(Content.EXPORT_DATA_DESC)}
       </div>
       <form>
@@ -19,6 +19,7 @@ export function ExportAccountPanel(props: { onClick: () => void }) {
           </Col>
           <Col xs={4}>
             <button className="green fb-button" type="button"
+              title={t("Export")}
               onClick={props.onClick}>
               {t("Export")}
             </button>
diff --git a/frontend/account/index.tsx b/frontend/account/index.tsx
index 658704fae..dac34ae48 100644
--- a/frontend/account/index.tsx
+++ b/frontend/account/index.tsx
@@ -47,12 +47,13 @@ export class RawAccount extends React.Component<Props, State> {
     (key: keyof User) => (key === "email") && this.setState({ warnThem: true });
 
   onChange = (e: React.FormEvent<HTMLInputElement>) => {
-    const { name, value } = e.currentTarget;
-    if (isKey(name)) {
-      this.tempHack(name);
-      this.props.dispatch(edit(this.props.user, { [name]: value }));
+    const { value } = e.currentTarget;
+    const field = e.currentTarget.name;
+    if (isKey(field)) {
+      this.tempHack(field);
+      this.props.dispatch(edit(this.props.user, { [field]: value }));
     } else {
-      throw new Error("Bad key: " + name);
+      throw new Error("Bad key: " + field);
     }
   };
 
diff --git a/frontend/account/labs/labs_features_list_ui.tsx b/frontend/account/labs/labs_features_list_ui.tsx
index f9dfafb84..1640ddda2 100644
--- a/frontend/account/labs/labs_features_list_ui.tsx
+++ b/frontend/account/labs/labs_features_list_ui.tsx
@@ -11,7 +11,7 @@ interface LabsFeaturesListProps {
 }
 
 export function LabsFeaturesList(props: LabsFeaturesListProps) {
-  return <div>
+  return <div className="labs-features-list">
     {fetchLabFeatures(props.getConfigValue).map((feature, i) => {
       const displayValue = feature.displayInvert ? !feature.value : feature.value;
       return <Row key={i}>
@@ -23,6 +23,7 @@ export function LabsFeaturesList(props: LabsFeaturesListProps) {
         </Col>
         <Col xs={2}>
           <ToggleButton
+            title={t("toggle feature")}
             toggleValue={displayValue ? 1 : 0}
             toggleAction={() => props.onToggle(feature)
               .then(() => feature.callback && feature.callback())}
diff --git a/frontend/account/request_account_export.ts b/frontend/account/request_account_export.ts
index 95bc0d568..703e41fc8 100644
--- a/frontend/account/request_account_export.ts
+++ b/frontend/account/request_account_export.ts
@@ -9,9 +9,8 @@ interface DataDumpExport { device?: DeviceAccountSettings; }
 type Response = AxiosResponse<DataDumpExport | undefined>;
 
 export function generateFilename({ device }: DataDumpExport): string {
-  let name: string;
-  name = device ? (device.name + "_" + device.id) : "farmbot";
-  return `export_${name}.json`.toLowerCase();
+  const nameAndId = device ? (device.name + "_" + device.id) : "farmbot";
+  return `export_${nameAndId}.json`.toLowerCase();
 }
 
 // Thanks, @KOL - https://stackoverflow.com/a/19328891/1064917
diff --git a/frontend/controls/axis_display_group.tsx b/frontend/controls/axis_display_group.tsx
index 601e8b812..13583749c 100644
--- a/frontend/controls/axis_display_group.tsx
+++ b/frontend/controls/axis_display_group.tsx
@@ -3,17 +3,19 @@ import { Row, Col } from "../ui/index";
 import { AxisDisplayGroupProps } from "./interfaces";
 import { isNumber } from "lodash";
 import { t } from "../i18next_wrapper";
+import { Xyz } from "farmbot";
 
-const Axis = ({ val }: { val: number | undefined }) => <Col xs={3}>
-  <input disabled value={isNumber(val) ? val : "---"} />
-</Col>;
+const Axis = ({ axis, val }: { val: number | undefined, axis: Xyz }) =>
+  <Col xs={3}>
+    <input disabled name={axis} value={isNumber(val) ? val : "---"} />
+  </Col>;
 
 export const AxisDisplayGroup = ({ position, label }: AxisDisplayGroupProps) => {
   const { x, y, z } = position;
   return <Row>
-    <Axis val={x} />
-    <Axis val={y} />
-    <Axis val={z} />
+    <Axis axis={"x"} val={x} />
+    <Axis axis={"y"} val={y} />
+    <Axis axis={"z"} val={z} />
     <Col xs={3}>
       <label>
         {t(label)}
diff --git a/frontend/controls/key_val_edit_row.tsx b/frontend/controls/key_val_edit_row.tsx
index 2e46b684a..383ac3450 100644
--- a/frontend/controls/key_val_edit_row.tsx
+++ b/frontend/controls/key_val_edit_row.tsx
@@ -15,12 +15,14 @@ export function KeyValEditRow(p: Props) {
   return <Row>
     <Col xs={6}>
       <input type="text"
+        name="label"
         placeholder={p.labelPlaceholder}
         value={p.label}
         onChange={p.onLabelChange} />
     </Col>
     <Col xs={4}>
       <input type={p.valueType}
+        name="value"
         value={p.value}
         placeholder={p.valuePlaceholder}
         onChange={p.onValueChange} />
diff --git a/frontend/controls/move/bot_position_rows.tsx b/frontend/controls/move/bot_position_rows.tsx
index 0a0120e2d..b22cadfb4 100644
--- a/frontend/controls/move/bot_position_rows.tsx
+++ b/frontend/controls/move/bot_position_rows.tsx
@@ -19,7 +19,7 @@ export interface BotPositionRowsProps {
 
 export const BotPositionRows = (props: BotPositionRowsProps) => {
   const { locationData, getValue, arduinoBusy } = props;
-  return <div>
+  return <div className={"bot-position-rows"}>
     <Row>
       <Col xs={3}>
         <label>{t("X AXIS")}</label>
diff --git a/frontend/controls/move/jog_controls_group.tsx b/frontend/controls/move/jog_controls_group.tsx
index a1c0b9e3b..9610494ab 100644
--- a/frontend/controls/move/jog_controls_group.tsx
+++ b/frontend/controls/move/jog_controls_group.tsx
@@ -22,7 +22,7 @@ export const JogControlsGroup = (props: JogControlsGroupProps) => {
   const {
     dispatch, stepSize, botPosition, getValue, arduinoBusy, firmwareSettings
   } = props;
-  return <div>
+  return <div className={"jog-controls-group"}>
     <label className="text-center">
       {t("MOVE AMOUNT (mm)")}
     </label>
diff --git a/frontend/controls/move/motor_position_plot.tsx b/frontend/controls/move/motor_position_plot.tsx
index 353a7bfb7..68fbe7379 100644
--- a/frontend/controls/move/motor_position_plot.tsx
+++ b/frontend/controls/move/motor_position_plot.tsx
@@ -46,9 +46,9 @@ const getLastEntry = (): Entry | undefined => {
 const findYLimit = (): number => {
   const array = getArray();
   const arrayAbsMax = max(array.map(entry =>
-    max(["position", "scaled_encoders"].map((name: LocationName) =>
+    max(["position", "scaled_encoders"].map((key: LocationName) =>
       max(["x", "y", "z"].map((axis: Xyz) =>
-        Math.abs(entry.locationData[name][axis] || 0) + 1))))));
+        Math.abs(entry.locationData[key][axis] || 0) + 1))))));
   return Math.max(ceil(arrayAbsMax || 0, -2), DEFAULT_Y_MAX);
 };
 
@@ -80,19 +80,19 @@ const getPaths = (): Paths => {
   const paths = newPaths();
   if (last) {
     getReversedArray().map(entry => {
-      ["position", "scaled_encoders"].map((name: LocationName) => {
+      ["position", "scaled_encoders"].map((key: LocationName) => {
         ["x", "y", "z"].map((axis: Xyz) => {
-          const lastPos = last.locationData[name][axis];
-          const pos = entry.locationData[name][axis];
+          const lastPos = last.locationData[key][axis];
+          const pos = entry.locationData[key][axis];
           if (isNumber(lastPos) && isFinite(lastPos)
             && isNumber(maxY) && isNumber(pos)) {
-            if (!paths[name][axis].startsWith("M")) {
+            if (!paths[key][axis].startsWith("M")) {
               const yStart = -lastPos / maxY * HEIGHT / 2;
-              paths[name][axis] = `M ${MAX_X},${yStart} `;
+              paths[key][axis] = `M ${MAX_X},${yStart} `;
             }
             const x = MAX_X - (last.timestamp - entry.timestamp);
             const y = -pos / maxY * HEIGHT / 2;
-            paths[name][axis] += `L ${x},${y} `;
+            paths[key][axis] += `L ${x},${y} `;
           }
         });
       });
@@ -154,12 +154,12 @@ const PlotLines = ({ locationData }: { locationData: BotLocationData }) => {
   updateArray({ timestamp: moment().unix(), locationData });
   const paths = getPaths();
   return <g id="plot_lines">
-    {["position", "scaled_encoders"].map((name: LocationName) =>
+    {["position", "scaled_encoders"].map((key: LocationName) =>
       ["x", "y", "z"].map((axis: Xyz) =>
-        <path key={name + axis} fill={"none"}
-          stroke={COLOR_LOOKUP[axis]} strokeWidth={LINEWIDTH_LOOKUP[name]}
+        <path key={key + axis} fill={"none"}
+          stroke={COLOR_LOOKUP[axis]} strokeWidth={LINEWIDTH_LOOKUP[key]}
           strokeLinecap={"round"} strokeLinejoin={"round"}
-          d={paths[name][axis]} />))}
+          d={paths[key][axis]} />))}
   </g>;
 };
 
diff --git a/frontend/controls/move/settings_menu.tsx b/frontend/controls/move/settings_menu.tsx
index 881d51a69..b75789921 100644
--- a/frontend/controls/move/settings_menu.tsx
+++ b/frontend/controls/move/settings_menu.tsx
@@ -56,7 +56,7 @@ export const MoveWidgetSettingsMenu = (
       setting={BooleanSetting.home_button_homing} />
 
     {DevSettings.futureFeaturesEnabled() &&
-      <div>
+      <div className={"motor-position-plot-setting-row"}>
         <p>{t("Motor position plot")}</p>
         <Setting
           label={t("show")}
diff --git a/frontend/controls/move/step_size_selector.tsx b/frontend/controls/move/step_size_selector.tsx
index d800efae0..eb9104888 100644
--- a/frontend/controls/move/step_size_selector.tsx
+++ b/frontend/controls/move/step_size_selector.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { StepSizeSelectorProps } from "./interfaces";
 import { first, last } from "lodash";
+import { t } from "../../i18next_wrapper";
 
 export class StepSizeSelector extends React.Component<StepSizeSelectorProps, {}> {
   cssForIndex(num: number) {
@@ -22,10 +23,10 @@ export class StepSizeSelector extends React.Component<StepSizeSelectorProps, {}>
     return <div className="move-amount-wrapper">
       {
         this.props.choices.map(
-          (item: number, inx: number) => <button
+          (item: number, inx: number) => <button key={inx}
+            title={t("{{ amount }}mm", { amount: item })}
             className={this.cssForIndex(item)}
-            onClick={() => this.props.selector(item)}
-            key={inx}>
+            onClick={() => this.props.selector(item)}>
             {item}
           </button>
         )
diff --git a/frontend/controls/peripherals/index.tsx b/frontend/controls/peripherals/index.tsx
index de5e6eba3..cb5dfe3c0 100644
--- a/frontend/controls/peripherals/index.tsx
+++ b/frontend/controls/peripherals/index.tsx
@@ -86,15 +86,17 @@ export class Peripherals
   render() {
     const { isEditing } = this.state;
     const status = getArrayStatus(this.props.peripherals);
-
+    const editButtonText = isEditing
+      ? t("Back")
+      : t("Edit");
     return <Widget className="peripherals-widget">
       <WidgetHeader title={t("Peripherals")} helpText={ToolTips.PERIPHERALS}>
         <button
           className="fb-button gray"
           onClick={this.toggle}
+          title={editButtonText}
           disabled={!!status && isEditing}>
-          {!isEditing && t("Edit")}
-          {isEditing && t("Back")}
+          {editButtonText}
         </button>
         <SaveBtn
           hidden={!isEditing}
@@ -104,6 +106,7 @@ export class Peripherals
           hidden={!isEditing}
           className="fb-button green"
           type="button"
+          title={t("add peripheral")}
           onClick={() => this.newPeripheral()}>
           <i className="fa fa-plus" />
         </button>
@@ -111,6 +114,7 @@ export class Peripherals
           hidden={!isEditing || this.props.firmwareHardware == "none"}
           className="fb-button green"
           type="button"
+          title={t("add stock peripherals")}
           onClick={() => this.stockPeripherals.map(p =>
             this.newPeripheral(p.pin, p.label))}>
           <i className="fa fa-plus" style={{ marginRight: "0.5rem" }} />
diff --git a/frontend/controls/pin_form_fields.tsx b/frontend/controls/pin_form_fields.tsx
index baa223ccb..515e30025 100644
--- a/frontend/controls/pin_form_fields.tsx
+++ b/frontend/controls/pin_form_fields.tsx
@@ -22,6 +22,7 @@ interface NameInputBoxProps {
 
 export const NameInputBox = (props: NameInputBoxProps) =>
   <input type="text"
+    name="name"
     placeholder={t("Name")}
     value={props.value}
     onChange={e => props.dispatch(edit(props.resource, {
diff --git a/frontend/controls/sensor_readings/__tests__/filter_readings_test.ts b/frontend/controls/sensor_readings/__tests__/filter_readings_test.ts
index 3d1c96d8f..404123c39 100644
--- a/frontend/controls/sensor_readings/__tests__/filter_readings_test.ts
+++ b/frontend/controls/sensor_readings/__tests__/filter_readings_test.ts
@@ -25,11 +25,11 @@ describe("filterSensorReadings()", () => {
     });
 
   const createLocatedReading = (locations: Record<Xyz, number | undefined>[]) =>
-    locations.map(location => {
+    locations.map(xyzLocation => {
       const sr = fakeSensorReading();
-      sr.body.x = location.x;
-      sr.body.y = location.y;
-      sr.body.z = location.z;
+      sr.body.x = xyzLocation.x;
+      sr.body.y = xyzLocation.y;
+      sr.body.z = xyzLocation.z;
       sr.body.created_at = defaultCreatedAt;
       return sr;
     });
@@ -38,7 +38,7 @@ describe("filterSensorReadings()", () => {
     sensor: undefined,
     timePeriod: 3600 * 24 * 7,
     endDate: 1515715140,
-    location: undefined,
+    xyzLocation: undefined,
     showPreviousPeriod: false,
     deviation: 0,
     hovered: undefined,
@@ -87,7 +87,7 @@ describe("filterSensorReadings()", () => {
     const locations = [expected, { x: 0, y: 0, z: 0 }];
     const filters = sensorReadingsState();
     filters.endDate = moment(defaultCreatedAt).unix() + 1;
-    filters.location = expected;
+    filters.xyzLocation = expected;
     const result = filterSensorReadings(
       createLocatedReading(locations), filters)("current");
     expect(result.length).toEqual(1);
@@ -101,7 +101,7 @@ describe("filterSensorReadings()", () => {
     const locations = [{ x: 1, y: 2, z: 3 }, { x: 0, y: 0, z: 0 }];
     const filters = sensorReadingsState();
     filters.endDate = moment(defaultCreatedAt).unix() + 1;
-    filters.location = expected;
+    filters.xyzLocation = expected;
     filters.deviation = 100;
     const result = filterSensorReadings(
       createLocatedReading(locations), filters)("current");
diff --git a/frontend/controls/sensor_readings/__tests__/location_selection_test.tsx b/frontend/controls/sensor_readings/__tests__/location_selection_test.tsx
index abf498cbd..d5979e46c 100644
--- a/frontend/controls/sensor_readings/__tests__/location_selection_test.tsx
+++ b/frontend/controls/sensor_readings/__tests__/location_selection_test.tsx
@@ -6,7 +6,7 @@ import { LocationSelectionProps } from "../interfaces";
 describe("<LocationSelection />", () => {
   function fakeProps(): LocationSelectionProps {
     return {
-      location: undefined,
+      xyzLocation: undefined,
       deviation: 0,
       setLocation: jest.fn(),
       setDeviation: jest.fn(),
@@ -22,7 +22,7 @@ describe("<LocationSelection />", () => {
 
   it("changes location", () => {
     const p = fakeProps();
-    p.location = { x: 10, y: 20, z: 30 };
+    p.xyzLocation = { x: 10, y: 20, z: 30 };
     const wrapper = mount(<LocationSelection {...p} />);
     wrapper.find("input").first().simulate("submit");
     expect(p.setLocation).toHaveBeenCalledWith({ x: 10, y: 20, z: 30 });
@@ -30,7 +30,7 @@ describe("<LocationSelection />", () => {
 
   it("changes location: undefined", () => {
     const p = fakeProps();
-    p.location = undefined;
+    p.xyzLocation = undefined;
     const wrapper = mount(<LocationSelection {...p} />);
     wrapper.find("input").first().simulate("submit");
     expect(p.setLocation).toHaveBeenCalledWith({ x: undefined });
@@ -47,7 +47,7 @@ describe("<LocationSelection />", () => {
 
 describe("<LocationDisplay />", () => {
   it("renders location ranges", () => {
-    const p = { location: { x: 10, y: 20, z: 30 }, deviation: 2 };
+    const p = { xyzLocation: { x: 10, y: 20, z: 30 }, deviation: 2 };
     const wrapper = mount(<LocationDisplay {...p} />);
     const txt = wrapper.text().toLowerCase();
     ["x", "y", "z", "8–12", "18–22", "28–32"]
diff --git a/frontend/controls/sensor_readings/__tests__/sensor_readings_test.tsx b/frontend/controls/sensor_readings/__tests__/sensor_readings_test.tsx
index 8114d3f43..d3f3ba031 100644
--- a/frontend/controls/sensor_readings/__tests__/sensor_readings_test.tsx
+++ b/frontend/controls/sensor_readings/__tests__/sensor_readings_test.tsx
@@ -43,9 +43,9 @@ describe("<SensorReadings />", () => {
   it("sets location", () => {
     const expectedLocation = { x: 1, y: 2, z: undefined };
     const wrapper = mount<SensorReadings>(<SensorReadings {...fakeProps()} />);
-    expect(wrapper.instance().state.location).toEqual(undefined);
+    expect(wrapper.instance().state.xyzLocation).toEqual(undefined);
     wrapper.instance().setLocation(expectedLocation);
-    expect(wrapper.instance().state.location).toEqual(expectedLocation);
+    expect(wrapper.instance().state.xyzLocation).toEqual(expectedLocation);
   });
 
   it("sets end date", () => {
@@ -87,9 +87,9 @@ describe("<SensorReadings />", () => {
     const p = fakeProps();
     p.sensors = [s];
     const wrapper = mount<SensorReadings>(<SensorReadings {...p} />);
-    wrapper.setState({ location: { x: 1, y: 2, z: 3 }, sensor: s });
+    wrapper.setState({ xyzLocation: { x: 1, y: 2, z: 3 }, sensor: s });
     wrapper.instance().clearFilters();
-    expect(wrapper.instance().state.location).toEqual(undefined);
+    expect(wrapper.instance().state.xyzLocation).toEqual(undefined);
     expect(wrapper.instance().state.sensor).toEqual(undefined);
   });
 });
diff --git a/frontend/controls/sensor_readings/filter_readings.ts b/frontend/controls/sensor_readings/filter_readings.ts
index d5896bc00..26e427be7 100644
--- a/frontend/controls/sensor_readings/filter_readings.ts
+++ b/frontend/controls/sensor_readings/filter_readings.ts
@@ -20,7 +20,7 @@ export const filterSensorReadings =
     sensorReadingsState: SensorReadingsState) =>
     (period: "current" | "previous"): TaggedSensorReading[] => {
       const {
-        sensor, endDate, timePeriod, showPreviousPeriod, location, deviation
+        sensor, endDate, timePeriod, showPreviousPeriod, xyzLocation, deviation
       } = sensorReadingsState;
 
       // Don't return sensor readings from the previous period if not desired.
@@ -41,11 +41,11 @@ export const filterSensorReadings =
         .filter(x => sensor ? x.body.pin === sensor.body.pin : true)
         // Filter by location
         .filter(sensorReading => {
-          if (location) {
+          if (xyzLocation) {
             const { body } = sensorReading;
             return every(["x", "y", "z"].map((axis: Xyz) => {
               const a = body[axis];
-              const input = location[axis];
+              const input = xyzLocation[axis];
               return isNumber(a) && isNumber(input)
                 ? (a <= input + deviation) && (a >= input - deviation)
                 : true;
diff --git a/frontend/controls/sensor_readings/interfaces.ts b/frontend/controls/sensor_readings/interfaces.ts
index c338249b7..d11bb8bd3 100644
--- a/frontend/controls/sensor_readings/interfaces.ts
+++ b/frontend/controls/sensor_readings/interfaces.ts
@@ -15,7 +15,7 @@ export interface SensorReadingsState {
   /** seconds */
   endDate: number;
   /** location filter setting */
-  location: AxisInputBoxGroupState | undefined;
+  xyzLocation: AxisInputBoxGroupState | undefined;
   /** Show the previous time period in addition to the current time period. */
   showPreviousPeriod: boolean;
   /** mm */
@@ -50,11 +50,11 @@ export interface SensorSelectionProps {
 }
 
 export interface LocationSelectionProps {
-  location: AxisInputBoxGroupState | undefined;
+  xyzLocation: AxisInputBoxGroupState | undefined;
   /** mm */
   deviation: number;
   setDeviation: (deviation: number) => void;
-  setLocation: (location: AxisInputBoxGroupState | undefined) => void;
+  setLocation: (xyzLocation: AxisInputBoxGroupState | undefined) => void;
 }
 
 export interface TimePeriodSelectionProps {
diff --git a/frontend/controls/sensor_readings/location_selection.tsx b/frontend/controls/sensor_readings/location_selection.tsx
index 155eaabc1..a05c02cce 100644
--- a/frontend/controls/sensor_readings/location_selection.tsx
+++ b/frontend/controls/sensor_readings/location_selection.tsx
@@ -10,7 +10,7 @@ import { t } from "../../i18next_wrapper";
 
 /** Select a location filter for sensor readings. */
 export const LocationSelection =
-  ({ location, deviation, setDeviation, setLocation }: LocationSelectionProps) =>
+  ({ xyzLocation, deviation, setDeviation, setLocation }: LocationSelectionProps) =>
     <div className="sensor-history-location-selection">
       <Row>
         {["x", "y", "z"].map(axis =>
@@ -26,9 +26,9 @@ export const LocationSelection =
           <AxisInputBox
             key={axis}
             axis={axis}
-            value={location ? location[axis] : undefined}
+            value={xyzLocation ? xyzLocation[axis] : undefined}
             onChange={(a: Xyz, v) => {
-              const newLocation = (location || {});
+              const newLocation = (xyzLocation || {});
               newLocation[a] = v;
               setLocation(newLocation);
             }} />)}
@@ -42,15 +42,15 @@ export const LocationSelection =
     </div>;
 
 /** Display sensor reading location filter settings. */
-export const LocationDisplay = ({ location, deviation }: {
-  location: AxisInputBoxGroupState | undefined,
+export const LocationDisplay = ({ xyzLocation, deviation }: {
+  xyzLocation: AxisInputBoxGroupState | undefined,
   deviation: number
 }) => {
   return <div className="location">
     {["x", "y", "z"].map((axis: Xyz) => {
       const axisString = () => {
-        if (location) {
-          const axisValue = location[axis];
+        if (xyzLocation) {
+          const axisValue = xyzLocation[axis];
           if (isNumber(axisValue)) {
             return deviation
               ? `${axisValue - deviation}–${axisValue + deviation}`
diff --git a/frontend/controls/sensor_readings/sensor_readings.tsx b/frontend/controls/sensor_readings/sensor_readings.tsx
index a4df2d3a4..b903682cd 100644
--- a/frontend/controls/sensor_readings/sensor_readings.tsx
+++ b/frontend/controls/sensor_readings/sensor_readings.tsx
@@ -20,7 +20,7 @@ export class SensorReadings
     sensor: undefined,
     timePeriod: 3600 * 24,
     endDate: getEndDate(this.props.sensorReadings),
-    location: undefined,
+    xyzLocation: undefined,
     showPreviousPeriod: false,
     deviation: 0,
     hovered: undefined,
@@ -32,15 +32,15 @@ export class SensorReadings
   setSensor = (sensor: TaggedSensor | undefined) => this.setState({ sensor });
   setEndDate = (endDate: number) => this.setState({ endDate });
   setTimePeriod = (timePeriod: number) => this.setState({ timePeriod });
-  setLocation = (location: AxisInputBoxGroupState | undefined) =>
-    this.setState({ location });
+  setLocation = (xyzLocation: AxisInputBoxGroupState | undefined) =>
+    this.setState({ xyzLocation });
   setDeviation = (deviation: number) => this.setState({ deviation });
   hover = (hovered: string | undefined) => this.setState({ hovered });
   clearFilters = () => this.setState({
     sensor: undefined,
     timePeriod: 3600 * 24,
     endDate: getEndDate(this.props.sensorReadings),
-    location: undefined,
+    xyzLocation: undefined,
     showPreviousPeriod: false,
     deviation: 0,
   });
@@ -55,7 +55,9 @@ export class SensorReadings
       <WidgetHeader
         title={t("Sensor History")}
         helpText={ToolTips.SENSOR_HISTORY}>
-        <button className="fb-button gray" onClick={this.clearFilters}>
+        <button className="fb-button gray"
+          title={t("clear filters")}
+          onClick={this.clearFilters}>
           {t("clear filters")}
         </button>
       </WidgetHeader>
@@ -72,7 +74,7 @@ export class SensorReadings
           setPeriod={this.setTimePeriod}
           togglePrevious={this.togglePrevious} />
         <LocationSelection
-          location={this.state.location}
+          xyzLocation={this.state.xyzLocation}
           deviation={this.state.deviation}
           setLocation={this.setLocation}
           setDeviation={this.setDeviation} />
@@ -100,7 +102,7 @@ export class SensorReadings
             timePeriod={this.state.timePeriod}
             timeSettings={this.props.timeSettings} />
           <LocationDisplay
-            location={this.state.location}
+            xyzLocation={this.state.xyzLocation}
             deviation={this.state.deviation} />
         </div>
       </WidgetFooter>
diff --git a/frontend/controls/sensor_readings/time_period_selection.tsx b/frontend/controls/sensor_readings/time_period_selection.tsx
index c40744603..b122240d1 100644
--- a/frontend/controls/sensor_readings/time_period_selection.tsx
+++ b/frontend/controls/sensor_readings/time_period_selection.tsx
@@ -74,6 +74,7 @@ export const TimePeriodSelection = (props: TimePeriodSelectionProps) => {
       <Col xs={ColWidth.showPrevious}>
         <div className="fb-checkbox large">
           <input type="checkbox"
+            name="previous"
             checked={showPreviousPeriod}
             onChange={togglePrevious} />
         </div>
diff --git a/frontend/controls/sensors/index.tsx b/frontend/controls/sensors/index.tsx
index ce5f021d7..6af8a09a9 100644
--- a/frontend/controls/sensors/index.tsx
+++ b/frontend/controls/sensors/index.tsx
@@ -58,15 +58,17 @@ export class Sensors extends React.Component<SensorsProps, SensorState> {
   render() {
     const { isEditing } = this.state;
     const status = getArrayStatus(this.props.sensors);
-
+    const editButtonText = isEditing
+      ? t("Back")
+      : t("Edit");
     return <Widget className="sensors-widget">
       <WidgetHeader title={t("Sensors")} helpText={ToolTips.SENSORS}>
         <button
           className="fb-button gray"
           onClick={this.toggle}
+          title={editButtonText}
           disabled={!!status && isEditing}>
-          {!isEditing && t("Edit")}
-          {isEditing && t("Back")}
+          {editButtonText}
         </button>
         <SaveBtn
           hidden={!isEditing}
@@ -76,6 +78,7 @@ export class Sensors extends React.Component<SensorsProps, SensorState> {
           hidden={!isEditing}
           className="fb-button green"
           type="button"
+          title={t("add sensors")}
           onClick={() => this.newSensor()}>
           <i className="fa fa-plus" />
         </button>
@@ -83,6 +86,7 @@ export class Sensors extends React.Component<SensorsProps, SensorState> {
           hidden={!isEditing || this.props.firmwareHardware == "none"}
           className="fb-button green"
           type="button"
+          title={t("add stock sensors")}
           onClick={this.stockSensors}>
           <i className="fa fa-plus" style={{ marginRight: "0.5rem" }} />
           {t("Stock sensors")}
diff --git a/frontend/controls/webcam/__tests__/show_test.tsx b/frontend/controls/webcam/__tests__/show_test.tsx
index 25c4aad35..b9abcacad 100644
--- a/frontend/controls/webcam/__tests__/show_test.tsx
+++ b/frontend/controls/webcam/__tests__/show_test.tsx
@@ -40,6 +40,6 @@ describe("<IndexIndicator/>", () => {
 
   it("doesn't render index indicator", () => {
     const wrapper = mount(<IndexIndicator i={0} total={1} />);
-    expect(wrapper.html()).toEqual("<div></div>");
+    expect(wrapper.html()).toEqual("<div class=\"no-index-indicator\"></div>");
   });
 });
diff --git a/frontend/controls/webcam/edit.tsx b/frontend/controls/webcam/edit.tsx
index ed29ec8a3..df1353405 100644
--- a/frontend/controls/webcam/edit.tsx
+++ b/frontend/controls/webcam/edit.tsx
@@ -32,16 +32,19 @@ export function Edit(props: WebcamPanelProps) {
       <button
         className="fb-button gray"
         disabled={unsaved.length > 0}
+        title={t("Back")}
         onClick={props.onToggle}>
         {t("Back")}
       </button>
       <button
         className="fb-button green"
+        title={t("Save")}
         onClick={() => { unsaved.map(x => props.save(x)); }}>
         {t("Save")}{unsaved.length > 0 ? "*" : ""}
       </button>
       <button
         className="fb-button green"
+        title={t("Add webcam")}
         onClick={props.init}>
         <i className="fa fa-plus" />
       </button>
diff --git a/frontend/controls/webcam/show.tsx b/frontend/controls/webcam/show.tsx
index 8eb3ae485..9c2354115 100644
--- a/frontend/controls/webcam/show.tsx
+++ b/frontend/controls/webcam/show.tsx
@@ -25,7 +25,7 @@ export function IndexIndicator(props: { i: number, total: number }): JSX.Element
     style={{
       width: `${percentWidth}%`,
       left: `calc(-10px + ${props.i} * ${percentWidth}%)`
-    }} /> : <div />;
+    }} /> : <div className={"no-index-indicator"} />;
 }
 
 export class Show extends React.Component<WebcamPanelProps, State> {
@@ -57,6 +57,7 @@ export class Show extends React.Component<WebcamPanelProps, State> {
       <WidgetHeader title={title} helpText={ToolTips.WEBCAM}>
         <button
           className="fb-button gray"
+          title={t("Edit")}
           onClick={props.onToggle}>
           {t("Edit")}
         </button>
@@ -74,6 +75,7 @@ export class Show extends React.Component<WebcamPanelProps, State> {
             onClick={() => flipper.down((_, current) => this.setState({ current }))}
             hidden={feeds.length < 2}
             disabled={false}
+            title={t("Previous image")}
             className="image-flipper-left fb-button">
             {t("Prev")}
           </button>
@@ -81,6 +83,7 @@ export class Show extends React.Component<WebcamPanelProps, State> {
             onClick={() => flipper.up((_, current) => this.setState({ current }))}
             hidden={feeds.length < 2}
             disabled={false}
+            title={t("Next image")}
             className="image-flipper-right fb-button">
             {t("Next")}
           </button>
diff --git a/frontend/css/farm_designer/farm_designer_panels.scss b/frontend/css/farm_designer/farm_designer_panels.scss
index e67e5ac60..affd0f7d0 100644
--- a/frontend/css/farm_designer/farm_designer_panels.scss
+++ b/frontend/css/farm_designer/farm_designer_panels.scss
@@ -945,7 +945,9 @@
     margin: 0;
   }
 }
-.clear-button {
+.preview-button,
+.cancel-button,
+.save-button {
   text-transform: uppercase;
   font-size: 1rem;
   border: 1px solid;
diff --git a/frontend/demo/demo_iframe.tsx b/frontend/demo/demo_iframe.tsx
index 1fe9181ed..54824f796 100644
--- a/frontend/demo/demo_iframe.tsx
+++ b/frontend/demo/demo_iframe.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { uuid } from "farmbot";
 import axios from "axios";
 import { ExternalUrl } from "../external_urls";
+import { t } from "../i18next_wrapper";
 
 interface State {
   error: Error | undefined;
@@ -23,7 +24,7 @@ export const WAITING_ON_API = "Planting your demo garden...";
 // APPLICATION CODE ==============================
 export class DemoIframe extends React.Component<{}, State> {
   state: State =
-    { error: undefined, stage: "DEMO THE APP" };
+    { error: undefined, stage: t("DEMO THE APP") };
 
   setError = (error?: Error) => this.setState({ error });
 
@@ -63,7 +64,9 @@ export class DemoIframe extends React.Component<{}, State> {
         <source src={ExternalUrl.Video.desktop} type="video/mp4" />
       </video>
       <img className="demo-phone" src={ExternalUrl.Video.mobile} />
-      <button className="demo-button" onClick={this.requestAccount}>
+      <button className="demo-button"
+        title={t("demo the app")}
+        onClick={this.requestAccount}>
         {this.state.stage}
       </button>
     </div>;
diff --git a/frontend/devices/actions.ts b/frontend/devices/actions.ts
index c1a9565ea..c2ab3ebfc 100644
--- a/frontend/devices/actions.ts
+++ b/frontend/devices/actions.ts
@@ -285,13 +285,13 @@ export function MCUFactoryReset() {
 
 /** Toggle a firmware setting. */
 export function settingToggle(
-  name: ConfigKey,
+  key: ConfigKey,
   sourceFwConfig: SourceFwConfig,
   displayAlert?: string | undefined
 ) {
   return function (dispatch: Function, getState: () => Everything) {
     if (displayAlert) { alert(trim(displayAlert)); }
-    const update = { [name]: (sourceFwConfig(name).value === 0) ? ON : OFF };
+    const update = { [key]: (sourceFwConfig(key).value === 0) ? ON : OFF };
     const firmwareConfig = getFirmwareConfig(getState().resources.index);
     const toggleFirmwareConfig = (fwConfig: TaggedFirmwareConfig) => {
       dispatch(edit(fwConfig, update));
diff --git a/frontend/devices/components/__tests__/pin_guard_input_group_test.tsx b/frontend/devices/components/__tests__/pin_guard_input_group_test.tsx
index 1cc9d7d80..12e5707ca 100644
--- a/frontend/devices/components/__tests__/pin_guard_input_group_test.tsx
+++ b/frontend/devices/components/__tests__/pin_guard_input_group_test.tsx
@@ -13,7 +13,7 @@ import {
 describe("<PinGuardMCUInputGroup/>", () => {
   const fakeProps = (): PinGuardMCUInputGroupProps => {
     return {
-      name: "Pin Guard 1",
+      label: "Pin Guard 1",
       pinNumKey: "pin_guard_1_pin_nr",
       timeoutKey: "pin_guard_1_time_out",
       activeStateKey: "pin_guard_1_active_state",
diff --git a/frontend/devices/components/__tests__/pin_number_dropdown_test.tsx b/frontend/devices/components/__tests__/pin_number_dropdown_test.tsx
index d8f8a8647..1a7bbbc63 100644
--- a/frontend/devices/components/__tests__/pin_number_dropdown_test.tsx
+++ b/frontend/devices/components/__tests__/pin_number_dropdown_test.tsx
@@ -17,7 +17,7 @@ import { updateMCU } from "../../actions";
 describe("<PinNumberDropdown />", () => {
   const fakeProps =
     (firmwareConfig?: TaggedFirmwareConfig): PinGuardMCUInputGroupProps => ({
-      name: "Pin Guard 1",
+      label: "Pin Guard 1",
       pinNumKey: "pin_guard_1_pin_nr",
       timeoutKey: "pin_guard_1_time_out",
       activeStateKey: "pin_guard_1_active_state",
diff --git a/frontend/devices/components/farmbot_os_settings.tsx b/frontend/devices/components/farmbot_os_settings.tsx
index 6b6dbf5f7..d31d066dc 100644
--- a/frontend/devices/components/farmbot_os_settings.tsx
+++ b/frontend/devices/components/farmbot_os_settings.tsx
@@ -110,11 +110,9 @@ export class FarmbotOsSettings
                 <div className="note">
                   {this.maybeWarnTz()}
                 </div>
-                <div>
-                  <TimezoneSelector
-                    currentTimezone={this.props.deviceAccount.body.timezone}
-                    onUpdate={this.handleTimezone} />
-                </div>
+                <TimezoneSelector
+                  currentTimezone={this.props.deviceAccount.body.timezone}
+                  onUpdate={this.handleTimezone} />
               </Col>
             </Highlight>
           </Row>
diff --git a/frontend/devices/components/fbos_settings/board_type.tsx b/frontend/devices/components/fbos_settings/board_type.tsx
index 9334f2a0d..9ec0c3102 100644
--- a/frontend/devices/components/fbos_settings/board_type.tsx
+++ b/frontend/devices/components/fbos_settings/board_type.tsx
@@ -56,14 +56,12 @@ export class BoardType extends React.Component<BoardTypeProps, BoardTypeState> {
           </label>
         </Col>
         <Col xs={ColWidth.description}>
-          <div>
-            <FBSelect
-              key={this.apiValue}
-              extraClass={this.state.sending ? "dim" : ""}
-              list={getFirmwareChoices()}
-              selectedItem={this.selectedBoard}
-              onChange={this.sendOffConfig} />
-          </div>
+          <FBSelect
+            key={this.apiValue}
+            extraClass={this.state.sending ? "dim" : ""}
+            list={getFirmwareChoices()}
+            selectedItem={this.selectedBoard}
+            onChange={this.sendOffConfig} />
         </Col>
         <Col xs={ColWidth.button}>
           <FirmwareHardwareStatus
diff --git a/frontend/devices/components/fbos_settings/camera_selection.tsx b/frontend/devices/components/fbos_settings/camera_selection.tsx
index 34adca94a..0b38f5bce 100644
--- a/frontend/devices/components/fbos_settings/camera_selection.tsx
+++ b/frontend/devices/components/fbos_settings/camera_selection.tsx
@@ -92,14 +92,12 @@ export class CameraSelection
           </label>
         </Col>
         <Col xs={ColWidth.description}>
-          <div>
-            <FBSelect
-              allowEmpty={false}
-              list={CAMERA_CHOICES()}
-              selectedItem={this.selectedCamera()}
-              onChange={this.sendOffConfig}
-              extraClass={this.props.botOnline ? "" : "disabled"} />
-          </div>
+          <FBSelect
+            allowEmpty={false}
+            list={CAMERA_CHOICES()}
+            selectedItem={this.selectedCamera()}
+            onChange={this.sendOffConfig}
+            extraClass={this.props.botOnline ? "" : "disabled"} />
         </Col>
       </Highlight>
     </Row>;
diff --git a/frontend/devices/components/fbos_settings/change_ownership_form.tsx b/frontend/devices/components/fbos_settings/change_ownership_form.tsx
index 2effbfaf4..45d65a198 100644
--- a/frontend/devices/components/fbos_settings/change_ownership_form.tsx
+++ b/frontend/devices/components/fbos_settings/change_ownership_form.tsx
@@ -90,6 +90,7 @@ export class ChangeOwnershipForm
       <Row>
         <button
           className={"fb-button gray"}
+          title={t("submit")}
           onClick={() => submitOwnershipChange(this.state)}>
           {t("submit")}
         </button>
diff --git a/frontend/devices/components/fbos_settings/factory_reset_row.tsx b/frontend/devices/components/fbos_settings/factory_reset_row.tsx
index 273313502..8cacd7a0f 100644
--- a/frontend/devices/components/fbos_settings/factory_reset_row.tsx
+++ b/frontend/devices/components/fbos_settings/factory_reset_row.tsx
@@ -4,16 +4,16 @@ import { Content, DeviceSetting } from "../../../constants";
 import { factoryReset, updateConfig } from "../../actions";
 import { ToggleButton } from "../../../controls/toggle_button";
 import { BotConfigInputBox } from "../bot_config_input_box";
-import { FactoryResetRowProps } from "./interfaces";
+import { FactoryResetRowsProps } from "./interfaces";
 import { ColWidth } from "../farmbot_os_settings";
 import { t } from "../../../i18next_wrapper";
 import { Highlight } from "../maybe_highlight";
 
-export function FactoryResetRow(props: FactoryResetRowProps) {
+export function FactoryResetRows(props: FactoryResetRowsProps) {
   const { dispatch, sourceFbosConfig, botOnline } = props;
   const disableFactoryReset = sourceFbosConfig("disable_factory_reset");
   const maybeDisableTimer = disableFactoryReset.value ? { color: "grey" } : {};
-  return <div>
+  return <div className={"factory-reset-options"}>
     <Row>
       <Highlight settingName={DeviceSetting.factoryReset}>
         <Col xs={ColWidth.label}>
@@ -31,6 +31,7 @@ export function FactoryResetRow(props: FactoryResetRowProps) {
             className="fb-button red"
             type="button"
             onClick={factoryReset}
+            title={t("FACTORY RESET")}
             disabled={!botOnline}>
             {t("FACTORY RESET")}
           </button>
diff --git a/frontend/devices/components/fbos_settings/fbos_button_row.tsx b/frontend/devices/components/fbos_settings/fbos_button_row.tsx
index 5ef9ec8f9..97f97b497 100644
--- a/frontend/devices/components/fbos_settings/fbos_button_row.tsx
+++ b/frontend/devices/components/fbos_settings/fbos_button_row.tsx
@@ -32,6 +32,7 @@ export const FbosButtonRow = (props: FbosButtonRowProps) => {
           className={`fb-button ${props.color}`}
           type="button"
           onClick={props.action}
+          title={t(props.buttonText)}
           disabled={!props.botOnline}>
           {t(props.buttonText)}
         </button>
diff --git a/frontend/devices/components/fbos_settings/fbos_details.tsx b/frontend/devices/components/fbos_settings/fbos_details.tsx
index 10cee6822..5772da9c6 100644
--- a/frontend/devices/components/fbos_settings/fbos_details.tsx
+++ b/frontend/devices/components/fbos_settings/fbos_details.tsx
@@ -267,7 +267,7 @@ export function FbosDetails(props: FbosDetailsProps) {
   const infoFwCommit = firmware_version?.includes(".") ? firmware_commit : "---";
   const firmwareCommit = firmware_version?.split("-")[1] || infoFwCommit;
 
-  return <div>
+  return <div className={"farmbot-os-details"}>
     <LastSeen
       dispatch={props.dispatch}
       botToMqttLastSeen={props.botToMqttLastSeen}
diff --git a/frontend/devices/components/fbos_settings/firmware_hardware_status.tsx b/frontend/devices/components/fbos_settings/firmware_hardware_status.tsx
index 6056d2df1..84fd94fc7 100644
--- a/frontend/devices/components/fbos_settings/firmware_hardware_status.tsx
+++ b/frontend/devices/components/fbos_settings/firmware_hardware_status.tsx
@@ -49,6 +49,7 @@ export const FlashFirmwareBtn = (props: FlashFirmwareBtnProps) => {
   const { apiFirmwareValue } = props;
   return <button className="fb-button yellow"
     disabled={!apiFirmwareValue || !props.botOnline}
+    title={t("flash firmware")}
     onClick={() => isFwHardwareValue(apiFirmwareValue) &&
       flashFirmware(apiFirmwareValue)}>
     {t("flash firmware")}
diff --git a/frontend/devices/components/fbos_settings/interfaces.ts b/frontend/devices/components/fbos_settings/interfaces.ts
index 1056ba10f..dc38165de 100644
--- a/frontend/devices/components/fbos_settings/interfaces.ts
+++ b/frontend/devices/components/fbos_settings/interfaces.ts
@@ -59,7 +59,7 @@ export interface PowerAndResetProps {
   botOnline: boolean;
 }
 
-export interface FactoryResetRowProps {
+export interface FactoryResetRowsProps {
   dispatch: Function;
   sourceFbosConfig: SourceFbosConfig;
   botOnline: boolean;
diff --git a/frontend/devices/components/fbos_settings/power_and_reset.tsx b/frontend/devices/components/fbos_settings/power_and_reset.tsx
index 1a33fa116..2a9fb27c3 100644
--- a/frontend/devices/components/fbos_settings/power_and_reset.tsx
+++ b/frontend/devices/components/fbos_settings/power_and_reset.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Header } from "../hardware_settings/header";
 import { Collapse, Popover, Position } from "@blueprintjs/core";
-import { FactoryResetRow } from "./factory_reset_row";
+import { FactoryResetRows } from "./factory_reset_row";
 import { PowerAndResetProps } from "./interfaces";
 import { ChangeOwnershipForm } from "./change_ownership_form";
 import { FbosButtonRow } from "./fbos_button_row";
@@ -42,7 +42,7 @@ export function PowerAndReset(props: PowerAndResetProps) {
         buttonText={t("RESTART")}
         color={"yellow"}
         action={restartFirmware} />
-      <FactoryResetRow
+      <FactoryResetRows
         dispatch={dispatch}
         sourceFbosConfig={sourceFbosConfig}
         botOnline={botOnline} />
diff --git a/frontend/devices/components/hardware_settings.tsx b/frontend/devices/components/hardware_settings.tsx
index f4a2c6612..552c02398 100644
--- a/frontend/devices/components/hardware_settings.tsx
+++ b/frontend/devices/components/hardware_settings.tsx
@@ -45,11 +45,13 @@ export class HardwareSettings extends
       <WidgetBody>
         <button
           className={"fb-button gray no-float"}
+          title={t("Expand All")}
           onClick={() => dispatch(bulkToggleControlPanel(true))}>
           {t("Expand All")}
         </button>
         <button
           className={"fb-button gray no-float"}
+          title={t("Collapse All")}
           onClick={() => dispatch(bulkToggleControlPanel(false))}>
           {t("Collapse All")}
         </button>
diff --git a/frontend/devices/components/hardware_settings/calibration_row.tsx b/frontend/devices/components/hardware_settings/calibration_row.tsx
index 5be2448c2..145020de3 100644
--- a/frontend/devices/components/hardware_settings/calibration_row.tsx
+++ b/frontend/devices/components/hardware_settings/calibration_row.tsx
@@ -27,6 +27,7 @@ export function CalibrationRow(props: CalibrationRowProps) {
           return <Col xs={2} key={axis} className={"centered-button-div"}>
             <LockableButton
               disabled={hardwareDisabled || botDisconnected}
+              title={t(props.axisTitle)}
               onClick={() => props.action(axis)}>
               {`${t(props.axisTitle)} ${axis}`}
             </LockableButton>
diff --git a/frontend/devices/components/hardware_settings/danger_zone.tsx b/frontend/devices/components/hardware_settings/danger_zone.tsx
index a7ce7940c..0d0d941eb 100644
--- a/frontend/devices/components/hardware_settings/danger_zone.tsx
+++ b/frontend/devices/components/hardware_settings/danger_zone.tsx
@@ -36,6 +36,7 @@ export function DangerZone(props: DangerZoneProps) {
             <button
               className="fb-button red"
               disabled={botDisconnected}
+              title={t("RESET")}
               onClick={onReset}>
               {t("RESET")}
             </button>
diff --git a/frontend/devices/components/hardware_settings/motors.tsx b/frontend/devices/components/hardware_settings/motors.tsx
index 39cdbabd6..58eaaf76c 100644
--- a/frontend/devices/components/hardware_settings/motors.tsx
+++ b/frontend/devices/components/hardware_settings/motors.tsx
@@ -16,7 +16,7 @@ import { Highlight } from "../maybe_highlight";
 
 export const calculateScale =
   (sourceFwConfig: SourceFwConfig): Record<Xyz, number | undefined> => {
-    const getV = (name: McuParamName) => sourceFwConfig(name).value;
+    const getV = (key: McuParamName) => sourceFwConfig(key).value;
     return {
       x: calcMicrostepsPerMm(getV("movement_step_per_mm_x"),
         getV("movement_microsteps_x")),
diff --git a/frontend/devices/components/hardware_settings/pin_guard.tsx b/frontend/devices/components/hardware_settings/pin_guard.tsx
index 1886382fc..1a40611b9 100644
--- a/frontend/devices/components/hardware_settings/pin_guard.tsx
+++ b/frontend/devices/components/hardware_settings/pin_guard.tsx
@@ -41,7 +41,7 @@ export function PinGuard(props: PinGuardProps) {
         </Col>
       </Row>
       <PinGuardMCUInputGroup
-        name={t("Pin Guard {{ num }}", { num: 1 })}
+        label={t("Pin Guard {{ num }}", { num: 1 })}
         pinNumKey={"pin_guard_1_pin_nr"}
         timeoutKey={"pin_guard_1_time_out"}
         activeStateKey={"pin_guard_1_active_state"}
@@ -49,7 +49,7 @@ export function PinGuard(props: PinGuardProps) {
         resources={resources}
         sourceFwConfig={sourceFwConfig} />
       <PinGuardMCUInputGroup
-        name={t("Pin Guard {{ num }}", { num: 2 })}
+        label={t("Pin Guard {{ num }}", { num: 2 })}
         pinNumKey={"pin_guard_2_pin_nr"}
         timeoutKey={"pin_guard_2_time_out"}
         activeStateKey={"pin_guard_2_active_state"}
@@ -57,7 +57,7 @@ export function PinGuard(props: PinGuardProps) {
         resources={resources}
         sourceFwConfig={sourceFwConfig} />
       <PinGuardMCUInputGroup
-        name={t("Pin Guard {{ num }}", { num: 3 })}
+        label={t("Pin Guard {{ num }}", { num: 3 })}
         pinNumKey={"pin_guard_3_pin_nr"}
         timeoutKey={"pin_guard_3_time_out"}
         activeStateKey={"pin_guard_3_active_state"}
@@ -65,7 +65,7 @@ export function PinGuard(props: PinGuardProps) {
         resources={resources}
         sourceFwConfig={sourceFwConfig} />
       <PinGuardMCUInputGroup
-        name={t("Pin Guard {{ num }}", { num: 4 })}
+        label={t("Pin Guard {{ num }}", { num: 4 })}
         pinNumKey={"pin_guard_4_pin_nr"}
         timeoutKey={"pin_guard_4_time_out"}
         activeStateKey={"pin_guard_4_active_state"}
@@ -73,7 +73,7 @@ export function PinGuard(props: PinGuardProps) {
         resources={resources}
         sourceFwConfig={sourceFwConfig} />
       <PinGuardMCUInputGroup
-        name={t("Pin Guard {{ num }}", { num: 5 })}
+        label={t("Pin Guard {{ num }}", { num: 5 })}
         pinNumKey={"pin_guard_5_pin_nr"}
         timeoutKey={"pin_guard_5_time_out"}
         activeStateKey={"pin_guard_5_active_state"}
diff --git a/frontend/devices/components/interfaces.ts b/frontend/devices/components/interfaces.ts
index 25db89d71..5ad60017c 100644
--- a/frontend/devices/components/interfaces.ts
+++ b/frontend/devices/components/interfaces.ts
@@ -65,7 +65,7 @@ export interface NumericMCUInputGroupProps {
 export interface PinGuardMCUInputGroupProps {
   sourceFwConfig: SourceFwConfig;
   dispatch: Function;
-  name: string;
+  label: string;
   pinNumKey: McuParamName;
   timeoutKey: McuParamName;
   activeStateKey: McuParamName;
diff --git a/frontend/devices/components/lockable_button.tsx b/frontend/devices/components/lockable_button.tsx
index 65ace1da2..1bcd74f5c 100644
--- a/frontend/devices/components/lockable_button.tsx
+++ b/frontend/devices/components/lockable_button.tsx
@@ -4,13 +4,15 @@ interface Props {
   onClick: Function;
   disabled: boolean;
   children?: React.ReactNode;
+  title?: string;
 }
 
-export function LockableButton({ onClick, disabled, children }: Props) {
+export function LockableButton({ onClick, disabled, children, title }: Props) {
   const className = disabled ? "gray" : "yellow";
   return <button
     className={"fb-button " + className}
     disabled={disabled}
+    title={title}
     onClick={() => disabled ? "" : onClick()}>
     {children}
   </button>;
diff --git a/frontend/devices/components/pin_guard_input_group.tsx b/frontend/devices/components/pin_guard_input_group.tsx
index 4b9dc6272..ac401b79d 100644
--- a/frontend/devices/components/pin_guard_input_group.tsx
+++ b/frontend/devices/components/pin_guard_input_group.tsx
@@ -10,7 +10,7 @@ import { PinNumberDropdown } from "./pin_number_dropdown";
 
 export function PinGuardMCUInputGroup(props: PinGuardMCUInputGroupProps) {
 
-  const { sourceFwConfig, dispatch, name, pinNumKey, timeoutKey, activeStateKey
+  const { sourceFwConfig, dispatch, label, pinNumKey, timeoutKey, activeStateKey
   } = props;
   const activeStateValue = sourceFwConfig(activeStateKey).value;
   const inactiveState = isUndefined(activeStateValue)
@@ -19,7 +19,7 @@ export function PinGuardMCUInputGroup(props: PinGuardMCUInputGroupProps) {
   return <Row>
     <Col xs={3}>
       <label>
-        {name}
+        {label}
       </label>
     </Col>
     <Col xs={3}>
diff --git a/frontend/devices/connectivity/connectivity.tsx b/frontend/devices/connectivity/connectivity.tsx
index 328f7b518..5846ece98 100644
--- a/frontend/devices/connectivity/connectivity.tsx
+++ b/frontend/devices/connectivity/connectivity.tsx
@@ -26,8 +26,8 @@ export class Connectivity
   extends React.Component<ConnectivityProps, ConnectivityState> {
   state: ConnectivityState = { hoveredConnection: undefined };
 
-  hover = (name: string) =>
-    () => this.setState({ hoveredConnection: name });
+  hover = (connectionName: string) =>
+    () => this.setState({ hoveredConnection: connectionName });
 
   render() {
     const { informational_settings } = this.props.bot.hardware;
diff --git a/frontend/devices/connectivity/diagnosis.tsx b/frontend/devices/connectivity/diagnosis.tsx
index f6fb0c9a1..de6b2ece5 100644
--- a/frontend/devices/connectivity/diagnosis.tsx
+++ b/frontend/devices/connectivity/diagnosis.tsx
@@ -28,7 +28,7 @@ export function Diagnosis(props: DiagnosisProps) {
   const diagnosisBoolean = diagnosisStatus(props);
   const diagnosisColor = diagnosisBoolean ? "green" : "red";
   const title = diagnosisBoolean ? t("Ok") : t("Error");
-  return <div>
+  return <div className={"diagnosis-section"}>
     <div className={"connectivity-diagnosis"}>
       <h4>{t("Diagnosis")}</h4>
     </div>
diff --git a/frontend/devices/connectivity/diagram.tsx b/frontend/devices/connectivity/diagram.tsx
index 3d0f61a66..99df138c1 100644
--- a/frontend/devices/connectivity/diagram.tsx
+++ b/frontend/devices/connectivity/diagram.tsx
@@ -49,8 +49,9 @@ const diagramPositions: CowardlyDictionary<Record<"x" | "y", number>> = {
   subRight: { x: 40, y: 110 }
 };
 
-export function getTextPosition(name: DiagramNodes): Record<"x" | "y", number> {
-  const position = diagramPositions[name];
+export function getTextPosition(
+  positionKey: DiagramNodes): Record<"x" | "y", number> {
+  const position = diagramPositions[positionKey];
   if (position) {
     return {
       x: position.x,
diff --git a/frontend/devices/must_be_online.tsx b/frontend/devices/must_be_online.tsx
index 8da2d83d1..122eb715b 100644
--- a/frontend/devices/must_be_online.tsx
+++ b/frontend/devices/must_be_online.tsx
@@ -27,7 +27,7 @@ export function MustBeOnline(props: MBOProps) {
   const { children, hideBanner, lockOpen, networkState, syncStatus } = props;
   const banner = hideBanner ? "" : "banner";
   if (isBotOnline(syncStatus, networkState) || lockOpen) {
-    return <div> {children} </div>;
+    return <div className={"bot-is-online-wrapper"}>{children}</div>;
   } else {
     return <div
       className={`unavailable ${banner}`}
diff --git a/frontend/devices/pin_bindings/__tests__/pin_binding_input_group_test.tsx b/frontend/devices/pin_bindings/__tests__/pin_binding_input_group_test.tsx
index 2b7cb1fa8..61238eddf 100644
--- a/frontend/devices/pin_bindings/__tests__/pin_binding_input_group_test.tsx
+++ b/frontend/devices/pin_bindings/__tests__/pin_binding_input_group_test.tsx
@@ -58,7 +58,7 @@ describe("<PinBindingInputGroup/>", () => {
   it("no pin selected", () => {
     const wrapper = mount(<PinBindingInputGroup {...fakeProps()} />);
     const buttons = wrapper.find("button");
-    expect(buttons.last().text()).toEqual("BIND");
+    expect(buttons.last().props().title).toEqual("BIND");
     buttons.last().simulate("click");
     expect(error).toHaveBeenCalledWith("Pin number cannot be blank.");
   });
@@ -66,7 +66,7 @@ describe("<PinBindingInputGroup/>", () => {
   it("no target selected", () => {
     const wrapper = mount(<PinBindingInputGroup {...fakeProps()} />);
     const buttons = wrapper.find("button");
-    expect(buttons.last().text()).toEqual("BIND");
+    expect(buttons.last().props().title).toEqual("BIND");
     wrapper.setState({ pinNumberInput: AVAILABLE_PIN });
     buttons.last().simulate("click");
     expect(error).toHaveBeenCalledWith("Please select a sequence or action.");
@@ -77,7 +77,7 @@ describe("<PinBindingInputGroup/>", () => {
     p.dispatch = jest.fn();
     const wrapper = mount(<PinBindingInputGroup {...p} />);
     const buttons = wrapper.find("button");
-    expect(buttons.last().text()).toEqual("BIND");
+    expect(buttons.last().props().title).toEqual("BIND");
     wrapper.setState({ pinNumberInput: 1, sequenceIdInput: 2 });
     buttons.last().simulate("click");
     expect(mockDevice.registerGpio).not.toHaveBeenCalled();
@@ -94,7 +94,7 @@ describe("<PinBindingInputGroup/>", () => {
     p.dispatch = jest.fn();
     const wrapper = mount(<PinBindingInputGroup {...p} />);
     const buttons = wrapper.find("button");
-    expect(buttons.last().text()).toEqual("BIND");
+    expect(buttons.last().props().title).toEqual("BIND");
     wrapper.setState({
       pinNumberInput: 0,
       bindingType: PinBindingType.special,
diff --git a/frontend/devices/pin_bindings/pin_binding_input_group.tsx b/frontend/devices/pin_bindings/pin_binding_input_group.tsx
index 684318430..be96059c2 100644
--- a/frontend/devices/pin_bindings/pin_binding_input_group.tsx
+++ b/frontend/devices/pin_bindings/pin_binding_input_group.tsx
@@ -133,8 +133,9 @@ export class PinBindingInputGroup
         <button
           className="fb-button green"
           type="button"
+          title={t("BIND")}
           onClick={this.bindPin}>
-          {t("BIND")}
+          <i className={"fa fa-plus"} />
         </button>
       </Col>
     </Row>;
diff --git a/frontend/devices/pin_bindings/pin_bindings.tsx b/frontend/devices/pin_bindings/pin_bindings.tsx
index ff2eaabda..751c0728b 100644
--- a/frontend/devices/pin_bindings/pin_bindings.tsx
+++ b/frontend/devices/pin_bindings/pin_bindings.tsx
@@ -81,12 +81,12 @@ export const PinBindingsContent = (props: PinBindingsContentProps) => {
         portalClassName={"bindings-warning-icon"}
         popoverClassName={"help"}>
         <i className="fa fa-exclamation-triangle" />
-        <div>
+        <div className={"pin-binding-warning"}>
           {t(ToolTips.PIN_BINDING_WARNING)}
         </div>
       </Popover>
     </Row>
-    <div>
+    <div className={"pin-bindings-list-and-input"}>
       <PinBindingsListHeader />
       <PinBindingsList
         pinBindings={pinBindings}
diff --git a/frontend/devices/pin_bindings/tagged_pin_binding_init.tsx b/frontend/devices/pin_bindings/tagged_pin_binding_init.tsx
index d9cddd433..a761f7be8 100644
--- a/frontend/devices/pin_bindings/tagged_pin_binding_init.tsx
+++ b/frontend/devices/pin_bindings/tagged_pin_binding_init.tsx
@@ -47,6 +47,7 @@ export const StockPinBindingsButton = (props: StockPinBindingsButtonProps) =>
     <button
       className="fb-button green"
       hidden={!hasButtons(props.firmwareHardware)}
+      title={t("add stock pin bindings")}
       onClick={() => stockPinBindings.map(binding =>
         props.dispatch(initSave("PinBinding", pinBindingBody(binding))))}>
       <i className="fa fa-plus" />
diff --git a/frontend/error_boundary.tsx b/frontend/error_boundary.tsx
index cd5096f82..342b8ab75 100644
--- a/frontend/error_boundary.tsx
+++ b/frontend/error_boundary.tsx
@@ -18,7 +18,7 @@ export class ErrorBoundary extends React.Component<Props, State> {
 
   no = () => this.props.fallback || <Apology />;
 
-  ok = () => this.props.children || <div />;
+  ok = () => this.props.children || <div className={"no-children"} />;
 
   render() { return (this.state.hasError ? this.no : this.ok)(); }
 }
diff --git a/frontend/farm_designer/farm_events/edit_fe_form.tsx b/frontend/farm_designer/farm_events/edit_fe_form.tsx
index 681ef3a91..a5da2d0d6 100644
--- a/frontend/farm_designer/farm_events/edit_fe_form.tsx
+++ b/frontend/farm_designer/farm_events/edit_fe_form.tsx
@@ -256,15 +256,15 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
     };
   }
 
-  fieldSet = (name: FarmEventViewModelKey, value: string) =>
+  fieldSet = (key: FarmEventViewModelKey, value: string) =>
     // A merge is required to not overwrite `fe`.
     this.setState(betterMerge(this.state, {
-      fe: { [name]: value },
+      fe: { [key]: value },
       specialStatusLocal: SpecialStatus.DIRTY
     }))
 
-  fieldGet = (name: FarmEventViewModelKey): string =>
-    (this.state.fe[name] || this.viewModel[name] || "").toString()
+  fieldGet = (key: FarmEventViewModelKey): string =>
+    (this.state.fe[key] || this.viewModel[key] || "").toString()
 
   nextItemTime = (fe: FarmEvent, now: moment.Moment
   ): moment.Moment | undefined => {
@@ -390,8 +390,8 @@ export class EditFEForm extends React.Component<EditFEProps, EditFEFormState> {
 
 export interface StartTimeFormProps {
   isRegimen: boolean;
-  fieldGet(name: FarmEventViewModelKey): string;
-  fieldSet(name: FarmEventViewModelKey, value: string): void;
+  fieldGet(key: FarmEventViewModelKey): string;
+  fieldSet(key: FarmEventViewModelKey, value: string): void;
   timeSettings: TimeSettings;
 }
 
@@ -426,8 +426,8 @@ export const StartTimeForm = (props: StartTimeFormProps) => {
 
 export interface RepeatFormProps {
   isRegimen: boolean;
-  fieldGet(name: FarmEventViewModelKey): string;
-  fieldSet(name: FarmEventViewModelKey, value: string): void;
+  fieldGet(key: FarmEventViewModelKey): string;
+  fieldSet(key: FarmEventViewModelKey, value: string): void;
   timeSettings: TimeSettings;
 }
 
@@ -437,13 +437,14 @@ export const RepeatForm = (props: RepeatFormProps) => {
     {!props.isRegimen
       ? <label>
         <input type="checkbox"
+          name="timeUnit"
           onChange={e => props.fieldSet("timeUnit",
             (!e.currentTarget.checked || props.isRegimen) ? "never" : "daily")}
           disabled={props.isRegimen}
           checked={allowRepeat} />
         {t("Repeats?")}
       </label>
-      : <div />}
+      : <div className={"no-repeat"} />}
     <FarmEventRepeatForm
       timeSettings={props.timeSettings}
       disabled={!allowRepeat}
@@ -459,7 +460,7 @@ export const RepeatForm = (props: RepeatFormProps) => {
 };
 
 export const dateCheck = (
-  fieldGet: (name: FarmEventViewModelKey) => string
+  fieldGet: (key: FarmEventViewModelKey) => string
 ): string | undefined => {
   const startDate = fieldGet("startDate");
   const endDate = fieldGet("endDate");
@@ -469,7 +470,7 @@ export const dateCheck = (
 };
 
 export const timeCheck = (
-  fieldGet: (name: FarmEventViewModelKey) => string,
+  fieldGet: (key: FarmEventViewModelKey) => string,
   timeSettings: TimeSettings
 ): string | undefined => {
   const startDate = fieldGet("startDate");
@@ -491,6 +492,7 @@ export interface FarmEventDeleteButtonProps {
 
 export const FarmEventDeleteButton = (props: FarmEventDeleteButtonProps) =>
   <button className="fb-button red" hidden={props.hidden}
+    title={t("Delete")}
     onClick={() =>
       props.dispatch(destroy(props.farmEvent.uuid))
         .then(() => {
@@ -502,8 +504,8 @@ export const FarmEventDeleteButton = (props: FarmEventDeleteButtonProps) =>
 
 export interface FarmEventFormProps {
   isRegimen: boolean;
-  fieldGet(name: FarmEventViewModelKey): string;
-  fieldSet(name: FarmEventViewModelKey, value: string): void;
+  fieldGet(key: FarmEventViewModelKey): string;
+  fieldSet(key: FarmEventViewModelKey, value: string): void;
   timeSettings: TimeSettings;
   executableOptions: DropDownItem[];
   executableSet(ddi: DropDownItem): void;
diff --git a/frontend/farm_designer/farm_events/farm_event_repeat_form.tsx b/frontend/farm_designer/farm_events/farm_event_repeat_form.tsx
index 8dd1883e0..d232830b2 100644
--- a/frontend/farm_designer/farm_events/farm_event_repeat_form.tsx
+++ b/frontend/farm_designer/farm_events/farm_event_repeat_form.tsx
@@ -15,7 +15,7 @@ export interface FarmEventRepeatFormProps {
   disabled: boolean;
   /** Should the form be shown _at all_? */
   hidden: boolean;
-  fieldSet(name: keyof FarmEventViewModel, value: string): void;
+  fieldSet(key: keyof FarmEventViewModel, value: string): void;
   timeUnit: TimeUnit;
   repeat: string;
   endDate: string;
@@ -30,53 +30,55 @@ const OPTN_LOOKUP = keyBy(repeatOptions, indexKey);
 
 export function FarmEventRepeatForm(props: FarmEventRepeatFormProps) {
   const { disabled, fieldSet, repeat, endDate, endTime, timeUnit } = props;
-  return props.hidden ? <div /> : <div className="farm-event-repeat-form">
-    <label>
-      {t("Every")}
-    </label>
-    <Row>
-      <Col xs={4}>
-        <BlurableInput
-          disabled={disabled}
-          placeholder="(Number)"
-          type="number"
-          className="add-event-repeat-frequency"
-          name="repeat"
-          value={repeat}
-          onCommit={e => fieldSet("repeat", e.currentTarget.value)}
-          min={1} />
-      </Col>
-      <Col xs={8}>
-        <FBSelect
-          list={repeatOptions}
-          onChange={ddi => fieldSet("timeUnit", "" + ddi.value)}
-          selectedItem={OPTN_LOOKUP[timeUnit] || OPTN_LOOKUP["daily"]} />
-      </Col>
-    </Row>
-    <label>
-      {t("Until")}
-    </label>
-    <Row>
-      <Col xs={6}>
-        <BlurableInput
-          disabled={disabled}
-          type="date"
-          className="add-event-end-date"
-          name="endDate"
-          value={endDate}
-          onCommit={e => fieldSet("endDate", e.currentTarget.value)}
-          error={props.dateError} />
-      </Col>
-      <Col xs={6}>
-        <EventTimePicker
-          disabled={disabled}
-          className="add-event-end-time"
-          name="endTime"
-          timeSettings={props.timeSettings}
-          value={endTime}
-          onCommit={e => fieldSet("endTime", e.currentTarget.value)}
-          error={props.timeError} />
-      </Col>
-    </Row>
-  </div>;
+  return props.hidden
+    ? <div className={"no-repeat-form"} />
+    : <div className="farm-event-repeat-form">
+      <label>
+        {t("Every")}
+      </label>
+      <Row>
+        <Col xs={4}>
+          <BlurableInput
+            disabled={disabled}
+            placeholder="(Number)"
+            type="number"
+            className="add-event-repeat-frequency"
+            name="repeat"
+            value={repeat}
+            onCommit={e => fieldSet("repeat", e.currentTarget.value)}
+            min={1} />
+        </Col>
+        <Col xs={8}>
+          <FBSelect
+            list={repeatOptions}
+            onChange={ddi => fieldSet("timeUnit", "" + ddi.value)}
+            selectedItem={OPTN_LOOKUP[timeUnit] || OPTN_LOOKUP["daily"]} />
+        </Col>
+      </Row>
+      <label>
+        {t("Until")}
+      </label>
+      <Row>
+        <Col xs={6}>
+          <BlurableInput
+            disabled={disabled}
+            type="date"
+            className="add-event-end-date"
+            name="endDate"
+            value={endDate}
+            onCommit={e => fieldSet("endDate", e.currentTarget.value)}
+            error={props.dateError} />
+        </Col>
+        <Col xs={6}>
+          <EventTimePicker
+            disabled={disabled}
+            className="add-event-end-time"
+            name="endTime"
+            timeSettings={props.timeSettings}
+            value={endTime}
+            onCommit={e => fieldSet("endTime", e.currentTarget.value)}
+            error={props.timeError} />
+        </Col>
+      </Row>
+    </div>;
 }
diff --git a/frontend/farm_designer/farm_events/farm_events.tsx b/frontend/farm_designer/farm_events/farm_events.tsx
index 643ee19bb..04eb0bc2a 100644
--- a/frontend/farm_designer/farm_events/farm_events.tsx
+++ b/frontend/farm_designer/farm_events/farm_events.tsx
@@ -109,6 +109,7 @@ export class PureFarmEvents
         noIcon={true}>
         <i className="fa fa-calendar" onClick={this.resetCalendar} />
         <input
+          name="searchTerm"
           value={this.state.searchTerm}
           onChange={e => this.setState({ searchTerm: e.currentTarget.value })}
           placeholder={t("Search your events...")} />
diff --git a/frontend/farm_designer/index.tsx b/frontend/farm_designer/index.tsx
index ab6721152..ca5400d90 100755
--- a/frontend/farm_designer/index.tsx
+++ b/frontend/farm_designer/index.tsx
@@ -49,10 +49,10 @@ export const gridOffset: AxisNumberProperty = { x: 50, y: 50 };
 export class RawFarmDesigner extends React.Component<Props, Partial<State>> {
 
   initializeSetting =
-    (name: keyof State, defaultValue: boolean): boolean => {
-      const currentValue = this.props.getConfigValue(name);
+    (key: keyof State, defaultValue: boolean): boolean => {
+      const currentValue = this.props.getConfigValue(key);
       if (isUndefined(currentValue)) {
-        this.props.dispatch(setWebAppConfigValue(name, defaultValue));
+        this.props.dispatch(setWebAppConfigValue(key, defaultValue));
         return defaultValue;
       } else {
         return !!currentValue;
@@ -87,10 +87,10 @@ export class RawFarmDesigner extends React.Component<Props, Partial<State>> {
     this.updateZoomLevel(0)();
   }
 
-  toggle = (name: keyof State) => () => {
-    const newValue = !this.state[name];
-    this.props.dispatch(setWebAppConfigValue(name, newValue));
-    this.setState({ [name]: newValue });
+  toggle = (key: keyof State) => () => {
+    const newValue = !this.state[key];
+    this.props.dispatch(setWebAppConfigValue(key, newValue));
+    this.setState({ [key]: newValue });
   }
 
   updateBotOriginQuadrant = (payload: BotOriginQuadrant) => () => {
diff --git a/frontend/farm_designer/map/easter_eggs/bugs.tsx b/frontend/farm_designer/map/easter_eggs/bugs.tsx
index 0b81947e1..95dd036f7 100644
--- a/frontend/farm_designer/map/easter_eggs/bugs.tsx
+++ b/frontend/farm_designer/map/easter_eggs/bugs.tsx
@@ -125,6 +125,7 @@ export const BugsControls = () =>
     ? <div className="more-bugs">
       <button
         className="fb-button green"
+        title={t("more bugs!")}
         onClick={resetBugs}>
         {t("more bugs!")}
       </button>
@@ -133,4 +134,4 @@ export const BugsControls = () =>
           {t("{{seconds}} seconds!", { seconds: getBugTime() })}
         </p>}
     </div>
-    : <div />;
+    : <div className={"no-bugs"} />;
diff --git a/frontend/farm_designer/map/layers/farmbot/__tests__/bot_figure_test.tsx b/frontend/farm_designer/map/layers/farmbot/__tests__/bot_figure_test.tsx
index f18c1c93b..d678e6d6b 100644
--- a/frontend/farm_designer/map/layers/farmbot/__tests__/bot_figure_test.tsx
+++ b/frontend/farm_designer/map/layers/farmbot/__tests__/bot_figure_test.tsx
@@ -9,7 +9,7 @@ import {
 
 describe("<BotFigure/>", () => {
   const fakeProps = (): BotFigureProps => ({
-    name: "",
+    figureName: "",
     position: { x: 0, y: 0, z: 0 },
     mapTransformProps: fakeMapTransformProps(),
     plantAreaOffset: { x: 100, y: 100 },
@@ -30,11 +30,11 @@ describe("<BotFigure/>", () => {
     ["motors", 4, { x: 3000, y: 1500 }, true, EXPECTED_MOTORS_OPACITY],
     ["encoders", 2, { x: 0, y: 0 }, false, 0.25],
   ])("shows %s in correct location for quadrant %i",
-    (name, quadrant, expected, xySwap, opacity) => {
+    (figureName, quadrant, expected, xySwap, opacity) => {
       const p = fakeProps();
       p.mapTransformProps.quadrant = quadrant;
       p.mapTransformProps.xySwap = xySwap;
-      p.name = name;
+      p.figureName = figureName;
       const result = shallow<BotFigure>(<BotFigure {...p} />);
 
       const expectedGantryProps = expect.objectContaining({
diff --git a/frontend/farm_designer/map/layers/farmbot/__tests__/index_test.tsx b/frontend/farm_designer/map/layers/farmbot/__tests__/index_test.tsx
index 3ea77f5b4..9f698cf5f 100644
--- a/frontend/farm_designer/map/layers/farmbot/__tests__/index_test.tsx
+++ b/frontend/farm_designer/map/layers/farmbot/__tests__/index_test.tsx
@@ -5,6 +5,7 @@ import { VirtualFarmBotProps } from "../../../interfaces";
 import {
   fakeMapTransformProps
 } from "../../../../../__test_support__/map_transform_props";
+import { BotFigure } from "../bot_figure";
 
 describe("<VirtualFarmBot/>", () => {
   function fakeProps(): VirtualFarmBotProps {
@@ -27,9 +28,9 @@ describe("<VirtualFarmBot/>", () => {
     const p = fakeProps();
     p.getConfigValue = () => false;
     const wrapper = shallow(<VirtualFarmBot {...p} />);
-    const figures = wrapper.find("BotFigure");
+    const figures = wrapper.find(BotFigure);
     expect(figures.length).toEqual(1);
-    expect(figures.last().props().name).toEqual("motor-position");
+    expect(figures.last().props().figureName).toEqual("motor-position");
   });
 
   it("shows trail", () => {
@@ -39,8 +40,8 @@ describe("<VirtualFarmBot/>", () => {
 
   it("shows encoder position", () => {
     const wrapper = shallow(<VirtualFarmBot {...fakeProps()} />);
-    const figures = wrapper.find("BotFigure");
+    const figures = wrapper.find(BotFigure);
     expect(figures.length).toEqual(2);
-    expect(figures.last().props().name).toEqual("encoder-position");
+    expect(figures.last().props().figureName).toEqual("encoder-position");
   });
 });
diff --git a/frontend/farm_designer/map/layers/farmbot/bot_figure.tsx b/frontend/farm_designer/map/layers/farmbot/bot_figure.tsx
index 9ceef1efa..bedccc010 100644
--- a/frontend/farm_designer/map/layers/farmbot/bot_figure.tsx
+++ b/frontend/farm_designer/map/layers/farmbot/bot_figure.tsx
@@ -9,7 +9,7 @@ import { reduceToolName } from "../tool_slots/tool_slot_point";
 import { noop } from "lodash";
 
 export interface BotFigureProps {
-  name: string;
+  figureName: string;
   position: BotPosition;
   mapTransformProps: MapTransformProps;
   plantAreaOffset: AxisNumberProperty;
@@ -29,14 +29,14 @@ export class BotFigure extends
 
   render() {
     const {
-      name, position, plantAreaOffset, eStopStatus, mapTransformProps,
+      figureName, position, plantAreaOffset, eStopStatus, mapTransformProps,
     } = this.props;
     const { xySwap } = mapTransformProps;
     const mapSize = getMapSize(mapTransformProps, plantAreaOffset);
     const positionQ = transformXY(
       (position.x || 0), (position.y || 0), mapTransformProps);
     const color = eStopStatus ? Color.virtualRed : Color.darkGray;
-    const opacity = name.includes("encoder") ? 0.25 : 0.5;
+    const opacity = figureName.includes("encoder") ? 0.25 : 0.5;
     const toolProps = {
       x: positionQ.qx,
       y: positionQ.qy,
@@ -45,7 +45,7 @@ export class BotFigure extends
       uuid: "utm",
       xySwap,
     };
-    return <g id={name}>
+    return <g id={figureName}>
       <rect id="gantry"
         x={xySwap ? -plantAreaOffset.x : positionQ.qx - 10}
         y={xySwap ? positionQ.qy - 10 : -plantAreaOffset.y}
diff --git a/frontend/farm_designer/map/layers/farmbot/index.tsx b/frontend/farm_designer/map/layers/farmbot/index.tsx
index 2c8699f49..be04f8244 100644
--- a/frontend/farm_designer/map/layers/farmbot/index.tsx
+++ b/frontend/farm_designer/map/layers/farmbot/index.tsx
@@ -24,14 +24,14 @@ export function VirtualFarmBot(props: VirtualFarmBotProps) {
       plantAreaOffset={plantAreaOffset}
       peripherals={peripherals}
       getConfigValue={getConfigValue} />
-    <BotFigure name={"motor-position"}
+    <BotFigure figureName={"motor-position"}
       position={props.botLocationData.position}
       mapTransformProps={mapTransformProps}
       plantAreaOffset={plantAreaOffset}
       mountedToolName={props.mountedToolName}
       eStopStatus={eStopStatus} />
     {encoderFigure &&
-      <BotFigure name={"encoder-position"}
+      <BotFigure figureName={"encoder-position"}
         position={props.botLocationData.scaled_encoders}
         mapTransformProps={mapTransformProps}
         plantAreaOffset={plantAreaOffset} />}
diff --git a/frontend/farm_designer/map/layers/images/map_image.tsx b/frontend/farm_designer/map/layers/images/map_image.tsx
index 6f2fa7b3d..f70a80dce 100644
--- a/frontend/farm_designer/map/layers/images/map_image.tsx
+++ b/frontend/farm_designer/map/layers/images/map_image.tsx
@@ -17,12 +17,12 @@ const parse = (str: string | undefined) => {
 };
 
 /* Check if the image has been rotated according to the calibration value. */
-const isRotated = (name: string | undefined, noCalib: boolean) => {
+const isRotated = (annotation: string | undefined, noCalib: boolean) => {
   if (PRE_CALIBRATION_PREVIEW && noCalib) { return true; }
-  return name &&
-    (name.includes("rotated")
-      || name.includes("marked")
-      || name.includes("calibration_result"));
+  return annotation &&
+    (annotation.includes("rotated")
+      || annotation.includes("marked")
+      || annotation.includes("calibration_result"));
 };
 
 /* Check if the calibration data is valid for the image provided using z. */
diff --git a/frontend/farm_designer/map_size_setting.tsx b/frontend/farm_designer/map_size_setting.tsx
index 8a70a9422..fdfefbedb 100644
--- a/frontend/farm_designer/map_size_setting.tsx
+++ b/frontend/farm_designer/map_size_setting.tsx
@@ -24,6 +24,7 @@ const LengthInput = (props: LengthInputProps) =>
     <Col xs={5}>
       <input
         type="number"
+        name={props.setting}
         value={"" + props.value}
         onChange={e => props.dispatch(setWebAppConfigValue(
           props.setting, e.currentTarget.value))} />
diff --git a/frontend/farm_designer/move_to.tsx b/frontend/farm_designer/move_to.tsx
index ab052c10e..f6c4d31fd 100644
--- a/frontend/farm_designer/move_to.tsx
+++ b/frontend/farm_designer/move_to.tsx
@@ -64,7 +64,7 @@ export class MoveToForm extends React.Component<MoveToFormProps, MoveToFormState
   render() {
     const { x, y } = this.props.chosenLocation;
     const { botOnline } = this.props;
-    return <div>
+    return <div className={"move-to-form"}>
       <Row>
         <Col xs={4}>
           <label>{t("X AXIS")}</label>
@@ -78,10 +78,10 @@ export class MoveToForm extends React.Component<MoveToFormProps, MoveToFormState
       </Row>
       <Row>
         <Col xs={4}>
-          <input disabled value={isNumber(x) ? x : "---"} />
+          <input disabled name="x" value={isNumber(x) ? x : "---"} />
         </Col>
         <Col xs={4}>
-          <input disabled value={isNumber(y) ? y : "---"} />
+          <input disabled name="y" value={isNumber(y) ? y : "---"} />
         </Col>
         <AxisInputBox
           onChange={(_, val: number) => this.setState({ z: val })}
@@ -91,7 +91,9 @@ export class MoveToForm extends React.Component<MoveToFormProps, MoveToFormState
           <button
             onClick={() => moveAbs(this.vector)}
             className={`fb-button gray ${botOnline ? "" : "pseudo-disabled"}`}
-            title={botOnline ? "" : t(Content.NOT_AVAILABLE_WHEN_OFFLINE)}>
+            title={botOnline
+              ? t("Move to this coordinate")
+              : t(Content.NOT_AVAILABLE_WHEN_OFFLINE)}>
             {t("Move to this coordinate")}
           </button>
         </Row>
diff --git a/frontend/farm_designer/plants/__tests__/plant_panel_test.tsx b/frontend/farm_designer/plants/__tests__/plant_panel_test.tsx
index 1686dc645..de2e04f98 100644
--- a/frontend/farm_designer/plants/__tests__/plant_panel_test.tsx
+++ b/frontend/farm_designer/plants/__tests__/plant_panel_test.tsx
@@ -189,7 +189,7 @@ describe("<EditDatePlanted />", () => {
 describe("<EditPlantLocation />", () => {
   const fakeProps = (): EditPlantLocationProps => ({
     uuid: "Plant.0.0",
-    location: { x: 1, y: 2 },
+    xyLocation: { x: 1, y: 2 },
     updatePlant: jest.fn(),
   });
 
diff --git a/frontend/farm_designer/plants/add_plant.tsx b/frontend/farm_designer/plants/add_plant.tsx
index e19dedb41..41fb34b4c 100644
--- a/frontend/farm_designer/plants/add_plant.tsx
+++ b/frontend/farm_designer/plants/add_plant.tsx
@@ -30,7 +30,7 @@ interface APDProps {
 }
 
 const AddPlantDescription = ({ svgIcon, children }: APDProps) =>
-  <div>
+  <div className={"add-plant-description"}>
     <img className="crop-drag-info-image"
       src={svgToUrl(svgIcon)}
       alt={t("plant icon")}
diff --git a/frontend/farm_designer/plants/crop_catalog.tsx b/frontend/farm_designer/plants/crop_catalog.tsx
index 54393d8b2..b773523cd 100644
--- a/frontend/farm_designer/plants/crop_catalog.tsx
+++ b/frontend/farm_designer/plants/crop_catalog.tsx
@@ -74,6 +74,7 @@ export class RawCropCatalog extends React.Component<CropCatalogProps, {}> {
             onChange={this.handleChange}
             onKeyPress={this.handleChange}
             className="search"
+            name="searchTerm"
             placeholder={t("Search OpenFarm...")} />
           {this.showResultChangeSpinner &&
             <Spinner radius={10} strokeWidth={3} />}
diff --git a/frontend/farm_designer/plants/crop_info.tsx b/frontend/farm_designer/plants/crop_info.tsx
index e56c69f50..1fe1ab6c6 100644
--- a/frontend/farm_designer/plants/crop_info.tsx
+++ b/frontend/farm_designer/plants/crop_info.tsx
@@ -44,7 +44,7 @@ const InfoField = (props: InfoFieldProps) =>
     <p>
       {t(startCase(props.title))}
     </p>
-    <div>
+    <div className={"crop-info-field-data"}>
       {props.children}
     </div>
   </li>;
@@ -67,11 +67,13 @@ const NO_VALUE = t("Not Set");
 const SvgIcon = ({ i, field, value }: SummaryItemProps) =>
   <InfoField key={i} title={field}>
     {value
-      ? <div><img
-        src={svgToUrl(value)}
-        width={100}
-        height={100}
-        onDragStart={setDragIcon(value)} /></div>
+      ? <div className={"svg-img"}>
+        <img
+          src={svgToUrl(value)}
+          width={100}
+          height={100}
+          onDragStart={setDragIcon(value)} />
+      </div>
       : <span>{NO_VALUE}</span>}
   </InfoField>;
 
@@ -149,6 +151,7 @@ const AddPlantHereButton = (props: {
       dispatch, openedSavedGarden
     }) : () => { };
   return <button className="fb-button gray no-float"
+    title={t("Add plant at current location")}
     disabled={!botXY} onClick={click}>
     {t("Add plant at current FarmBot location {{coordinate}}",
       { coordinate: botXYLabel })}
diff --git a/frontend/farm_designer/plants/grid/__tests__/plant_grid_test.tsx b/frontend/farm_designer/plants/grid/__tests__/plant_grid_test.tsx
index 33ce512ae..19729bcfc 100644
--- a/frontend/farm_designer/plants/grid/__tests__/plant_grid_test.tsx
+++ b/frontend/farm_designer/plants/grid/__tests__/plant_grid_test.tsx
@@ -23,14 +23,13 @@ describe("PlantGrid", () => {
     const p = fakeProps();
     const el = mount<PlantGrid>(<PlantGrid {...p} />);
     // Upon load, there should be one button.
-    const previewButton = el.find("a.clear-button");
+    const previewButton = el.find("a.preview-button");
     expect(previewButton.text()).toContain("Preview");
     previewButton.simulate("click");
 
     // After clicking PREVIEW, there should be two buttons.
-    const saveAndCancelBtns = el.find("a.clear-button");
-    const cancel = saveAndCancelBtns.at(0);
-    const save = saveAndCancelBtns.at(1);
+    const cancel = el.find("a.cancel-button");
+    const save = el.find("a.save-button");
     expect(cancel.text()).toContain("Cancel");
     expect(save.text()).toContain("Save");
     expect(el.state().status).toEqual("dirty");
diff --git a/frontend/farm_designer/plants/grid/plant_grid.tsx b/frontend/farm_designer/plants/grid/plant_grid.tsx
index 9d83b41f3..28f841a56 100644
--- a/frontend/farm_designer/plants/grid/plant_grid.tsx
+++ b/frontend/farm_designer/plants/grid/plant_grid.tsx
@@ -77,17 +77,23 @@ export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
   buttons = () => {
     switch (this.state.status) {
       case "clean":
-        return <div>
-          <a className={"clear-button"} onClick={this.performPreview}>
+        return <div className={"preview-grid-button"}>
+          <a className={"preview-button"}
+            title={t("Preview")}
+            onClick={this.performPreview}>
             {t("Preview")}
           </a>
         </div>;
       case "dirty":
-        return <div>
-          <a className={"clear-button"} onClick={this.revertPreview}>
+        return <div className={"save-or-cancel-grid-button"}>
+          <a className={"cancel-button"}
+            title={t("Cancel")}
+            onClick={this.revertPreview}>
             {t("Cancel")}
           </a>
-          <a className={"clear-button"} onClick={this.saveGrid}>
+          <a className={"save-button"}
+            title={t("Save")}
+            onClick={this.saveGrid}>
             {t("Save")}
           </a>
         </div>;
@@ -95,7 +101,7 @@ export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
   }
 
   render() {
-    return <div>
+    return <div className={"grid-and-row-planting"}>
       <hr style={{ borderTop: "1.5px solid rgba(255, 255, 255 ,0.7)" }} />
       <h3>
         {t("Grid and Row Planting")}
diff --git a/frontend/farm_designer/plants/openfarm_search_results.tsx b/frontend/farm_designer/plants/openfarm_search_results.tsx
index d6040a26f..964dbfcb6 100644
--- a/frontend/farm_designer/plants/openfarm_search_results.tsx
+++ b/frontend/farm_designer/plants/openfarm_search_results.tsx
@@ -32,33 +32,31 @@ export class OpenFarmResults extends React.Component<SearchResultProps, {}> {
   }
 
   render() {
-    return <div>
-      <EmptyStateWrapper
-        notEmpty={this.props.cropSearchResults.length > 0}
-        graphic={EmptyStateGraphic.no_crop_results}
-        title={this.props.cropSearchInProgress
-          ? t("Searching...")
-          : t("No search results")}
-        textElement={this.props.cropSearchInProgress ? <div /> : this.text}
-        colorScheme={"plants"}>
-        {this.props.cropSearchResults.map(resp => {
-          const { crop, image } = resp;
-          return <Link
-            key={resp.crop.slug}
-            draggable={false}
-            to={`/app/designer/plants/crop_search/` + crop.slug.toString()}>
-            <div className="plant-catalog-tile col-xs-6">
-              <label>
-                {crop.name}
-              </label>
-              <div
-                className="plant-catalog-image"
-                style={{ background: `url(${image}) top center no-repeat` }}
-                draggable={false} />
-            </div>
-          </Link>;
-        })}
-      </EmptyStateWrapper>
-    </div>;
+    return <EmptyStateWrapper
+      notEmpty={this.props.cropSearchResults.length > 0}
+      graphic={EmptyStateGraphic.no_crop_results}
+      title={this.props.cropSearchInProgress
+        ? t("Searching...")
+        : t("No search results")}
+      textElement={this.props.cropSearchInProgress ? undefined : this.text}
+      colorScheme={"plants"}>
+      {this.props.cropSearchResults.map(resp => {
+        const { crop, image } = resp;
+        return <Link
+          key={resp.crop.slug}
+          draggable={false}
+          to={`/app/designer/plants/crop_search/` + crop.slug.toString()}>
+          <div className="plant-catalog-tile col-xs-6">
+            <label>
+              {crop.name}
+            </label>
+            <div
+              className="plant-catalog-image"
+              style={{ background: `url(${image}) top center no-repeat` }}
+              draggable={false} />
+          </div>
+        </Link>;
+      })}
+    </EmptyStateWrapper>;
   }
 }
diff --git a/frontend/farm_designer/plants/plant_inventory.tsx b/frontend/farm_designer/plants/plant_inventory.tsx
index 050495338..9599084a0 100644
--- a/frontend/farm_designer/plants/plant_inventory.tsx
+++ b/frontend/farm_designer/plants/plant_inventory.tsx
@@ -47,7 +47,7 @@ export class RawPlants extends React.Component<PlantInventoryProps, State> {
         panel={Panel.Plants}
         linkTo={"/app/designer/plants/crop_search"}
         title={t("Add plant")}>
-        <input type="text" onChange={this.update}
+        <input type="text" onChange={this.update} name="searchTerm"
           placeholder={t("Search your plants...")} />
       </DesignerPanelTop>
       <DesignerPanelContent panelName={"plant"}>
diff --git a/frontend/farm_designer/plants/plant_panel.tsx b/frontend/farm_designer/plants/plant_panel.tsx
index ead668a8c..ab5b3d81d 100644
--- a/frontend/farm_designer/plants/plant_panel.tsx
+++ b/frontend/farm_designer/plants/plant_panel.tsx
@@ -51,18 +51,18 @@ export const EditDatePlanted = (props: EditDatePlantedProps) => {
 };
 
 export interface EditPlantLocationProps extends EditPlantProperty {
-  location: Record<"x" | "y", number>;
+  xyLocation: Record<"x" | "y", number>;
 }
 
 export const EditPlantLocation = (props: EditPlantLocationProps) => {
-  const { location, updatePlant, uuid } = props;
+  const { xyLocation, updatePlant, uuid } = props;
   return <Row>
     {["x", "y"].map((axis: "x" | "y") =>
       <Col xs={6} key={axis}>
         <label style={{ marginTop: 0 }}>{t("{{axis}} (mm)", { axis })}</label>
         <BlurableInput
           type="number"
-          value={location[axis]}
+          value={xyLocation[axis]}
           min={0}
           onCommit={e => updatePlant(uuid, {
             [axis]: round(parseIntInput(e.currentTarget.value))
@@ -89,6 +89,7 @@ interface MoveToPlantProps {
 const MoveToPlant = (props: MoveToPlantProps) =>
   <button className="fb-button gray no-float"
     style={{ marginTop: "1rem" }}
+    title={t("Move to this plant")}
     onClick={() => props.dispatch(chooseLocation({ x: props.x, y: props.y }))
       .then(() => history.push("/app/designer/move_to"))}>
     {t("Move FarmBot to this plant")}
@@ -99,20 +100,22 @@ interface DeleteButtonsProps {
 }
 
 const DeleteButtons = (props: DeleteButtonsProps) =>
-  <div>
-    <div>
+  <div className={"plant-delete-buttons"}>
+    <div className={"plant-delete-button-label"}>
       <label>
         {t("Delete this plant")}
       </label>
     </div>
     <button
       className="fb-button red no-float"
+      title={t("Delete")}
       onClick={props.destroy}>
       {t("Delete")}
     </button>
     <button
       className="fb-button gray no-float"
       style={{ marginRight: "10px" }}
+      title={t("Delete multiple")}
       onClick={() => history.push("/app/designer/plants/select")}>
       {t("Delete multiple")}
     </button>
@@ -128,7 +131,7 @@ export const ListItem = (props: ListItemProps) =>
     <p>
       {props.name}
     </p>
-    <div>
+    <div className={"plant-info-field-data"}>
       {props.children}
     </div>
   </li>;
@@ -171,7 +174,7 @@ export function PlantPanel(props: PlantPanelProps) {
         </Row>}
       <ListItem name={t("Location")}>
         <EditPlantLocation uuid={uuid}
-          location={{ x, y }}
+          xyLocation={{ x, y }}
           updatePlant={updatePlant} />
       </ListItem>
       <MoveToPlant x={x} y={y} dispatch={dispatch} />
diff --git a/frontend/farm_designer/plants/select_plants.tsx b/frontend/farm_designer/plants/select_plants.tsx
index 1be2965e3..88d945dc6 100644
--- a/frontend/farm_designer/plants/select_plants.tsx
+++ b/frontend/farm_designer/plants/select_plants.tsx
@@ -60,10 +60,12 @@ export class RawSelectPlants extends React.Component<SelectPlantsProps, {}> {
     <div className="panel-action-buttons">
       <div className="button-row">
         <button className="fb-button gray"
+          title={t("Select none")}
           onClick={() => this.props.dispatch(selectPlant(undefined))}>
           {t("Select none")}
         </button>
         <button className="fb-button gray"
+          title={t("Select all")}
           onClick={() => this.props
             .dispatch(selectPlant(this.props.plants.map(p => p.uuid)))}>
           {t("Select all")}
@@ -72,10 +74,12 @@ export class RawSelectPlants extends React.Component<SelectPlantsProps, {}> {
       <label>{t("SELECTION ACTIONS")}</label>
       <div className="button-row">
         <button className="fb-button red"
+          title={t("Delete")}
           onClick={() => this.destroySelected(this.props.selected)}>
           {t("Delete")}
         </button>
         <button className="fb-button dark-blue"
+          title={t("Create group")}
           onClick={() => !this.props.gardenOpen
             ? this.props.dispatch(createGroup({ pointUuids: this.selected }))
             : error(t(Content.ERROR_PLANT_TEMPLATE_GROUP))}>
diff --git a/frontend/farm_designer/point_groups/__tests__/point_group_sort_test.ts b/frontend/farm_designer/point_groups/__tests__/point_group_sort_test.ts
index 096e36b7d..9f7801dbe 100644
--- a/frontend/farm_designer/point_groups/__tests__/point_group_sort_test.ts
+++ b/frontend/farm_designer/point_groups/__tests__/point_group_sort_test.ts
@@ -4,9 +4,9 @@ import { TaggedPoint } from "farmbot";
 import { fakePlant } from "../../../__test_support__/fake_state/resources";
 
 describe("sort()", () => {
-  const phony = (name: string, x: number, y: number): TaggedPoint => {
+  const phony = (plantName: string, x: number, y: number): TaggedPoint => {
     const plant = fakePlant();
-    plant.body.name = name;
+    plant.body.name = plantName;
     plant.body.x = x;
     plant.body.y = y;
     return plant;
diff --git a/frontend/farm_designer/point_groups/criteria/add.tsx b/frontend/farm_designer/point_groups/criteria/add.tsx
index 5081181a8..40a678c9d 100644
--- a/frontend/farm_designer/point_groups/criteria/add.tsx
+++ b/frontend/farm_designer/point_groups/criteria/add.tsx
@@ -45,12 +45,15 @@ export class AddEqCriteria<T extends string | number>
         </Col>
         <Col xs={4}>
           <input type={this.props.type}
+            name="value"
             placeholder={t("value")}
             value={this.state.value}
             onChange={e => this.setState({ value: e.currentTarget.value })} />
         </Col>
         <Col xs={2}>
-          <button className="fb-button green" onClick={this.commit}>
+          <button className="fb-button green"
+            title={t("add criteria")}
+            onClick={this.commit}>
             <i className="fa fa-plus" />
           </button>
         </Col>
@@ -149,7 +152,9 @@ export class AddStringCriteria
             onChange={this.change} />
         </Col>
         <Col xs={2}>
-          <button className="fb-button green" onClick={this.commit}>
+          <button className="fb-button green"
+            title={t("add string criteria")}
+            onClick={this.commit}>
             <i className="fa fa-plus" />
           </button>
         </Col>
@@ -182,6 +187,7 @@ export class AddNumberCriteria
       <Row>
         <Col xs={4}>
           <input type="string"
+            name="key"
             placeholder={t("field")}
             value={this.state.key}
             onChange={this.changeKey} />
@@ -191,11 +197,14 @@ export class AddNumberCriteria
         </Col>
         <Col xs={4}>
           <input type="number"
+            name="value"
             value={this.state.value}
             onChange={this.changeValue} />
         </Col>
         <Col xs={2}>
-          <button className="fb-button green" onClick={this.commit}>
+          <button className="fb-button green"
+            title={t("add number criteria")}
+            onClick={this.commit}>
             <i className="fa fa-plus" />
           </button>
         </Col>
diff --git a/frontend/farm_designer/point_groups/criteria/component.tsx b/frontend/farm_designer/point_groups/criteria/component.tsx
index 73414dc44..18d9f006f 100644
--- a/frontend/farm_designer/point_groups/criteria/component.tsx
+++ b/frontend/farm_designer/point_groups/criteria/component.tsx
@@ -21,12 +21,14 @@ export class GroupCriteria extends
     const commonProps = { group, criteria, dispatch };
     return <div className="group-criteria">
       <label className="criteria-heading">{t("criteria")}</label>
-      <button className="fb-button red" onClick={() => {
-        dispatch(overwrite(group, {
-          ...group.body, criteria: DEFAULT_CRITERIA
-        }));
-        dispatch(save(group.uuid));
-      }}>
+      <button className="fb-button red"
+        title={t("clear all criteria")}
+        onClick={() => {
+          dispatch(overwrite(group, {
+            ...group.body, criteria: DEFAULT_CRITERIA
+          }));
+          dispatch(save(group.uuid));
+        }}>
         {t("clear all criteria")}
       </button>
       <div className="group-criteria-presets">
@@ -60,13 +62,13 @@ export class GroupCriteria extends
 export const GroupPointCountBreakdown = (props: GroupPointCountBreakdownProps) =>
   <div className={"criteria-point-count-breakdown"}>
     <div className={"manual-group-member-count"}>
-      <div>
+      <div className={"manual-selection-count"}>
         {props.manualCount}
       </div>
       <p>{t("manually selected")}</p>
     </div>
     <div className={"criteria-group-member-count"}>
-      <div>
+      <div className={"criteria-selection-count"}>
         {props.totalCount - props.manualCount}
       </div>
       <p>{t("selected by criteria")}</p>
diff --git a/frontend/farm_designer/point_groups/criteria/show.tsx b/frontend/farm_designer/point_groups/criteria/show.tsx
index 22f301e8a..5c4744601 100644
--- a/frontend/farm_designer/point_groups/criteria/show.tsx
+++ b/frontend/farm_designer/point_groups/criteria/show.tsx
@@ -32,18 +32,20 @@ export class EqCriteriaSelection<T extends string | number>
             {values.map((value, valueIndex) =>
               <Row key={"" + keyIndex + valueIndex}>
                 <Col xs={9}>
-                  <input
+                  <input name="value"
                     disabled={true}
                     value={value} />
                 </Col>
                 <Col xs={2}>
-                  <button className="fb-button red" onClick={() => {
-                    const tempCriteriaField = cloneDeep(criteriaField);
-                    toggleEqCriteria<T>(tempCriteriaField)(key, value);
-                    dispatch(editCriteria(group, {
-                      [criteriaKey]: tempCriteriaField
-                    }));
-                  }}>
+                  <button className="fb-button red"
+                    title={t("remove criteria")}
+                    onClick={() => {
+                      const tempCriteriaField = cloneDeep(criteriaField);
+                      toggleEqCriteria<T>(tempCriteriaField)(key, value);
+                      dispatch(editCriteria(group, {
+                        [criteriaKey]: tempCriteriaField
+                      }));
+                    }}>
                     <i className="fa fa-minus" />
                   </button>
                 </Col>
@@ -69,17 +71,20 @@ export const NumberCriteriaSelection = (props: NumberCriteriaProps) => {
             </Col>
             <Col xs={4}>
               <input key={"" + keyIndex}
+                name="value"
                 disabled={true}
                 value={value} />
             </Col>
             <Col xs={2}>
-              <button className="fb-button red" onClick={() => {
-                const tempNumberCriteria = cloneDeep(criteriaField);
-                delete tempNumberCriteria[key];
-                props.dispatch(editCriteria(props.group, {
-                  [props.criteriaKey]: tempNumberCriteria
-                }));
-              }}>
+              <button className="fb-button red"
+                title={t("remove number criteria")}
+                onClick={() => {
+                  const tempNumberCriteria = cloneDeep(criteriaField);
+                  delete tempNumberCriteria[key];
+                  props.dispatch(editCriteria(props.group, {
+                    [props.criteriaKey]: tempNumberCriteria
+                  }));
+                }}>
                 <i className="fa fa-minus" />
               </button>
             </Col>
@@ -112,11 +117,12 @@ export const DaySelection = (props: CriteriaSelectionProps) => {
           }))} />
       </Col>
       <Col xs={3}>
-        <input type="number" value={dayCriteria.days_ago} onChange={e => {
-          const { op } = dayCriteria;
-          const days_ago = parseInt(e.currentTarget.value);
-          dispatch(editCriteria(group, { day: { days_ago, op } }));
-        }} />
+        <input type="number" value={dayCriteria.days_ago} name="days_ago"
+          onChange={e => {
+            const { op } = dayCriteria;
+            const days_ago = parseInt(e.currentTarget.value);
+            dispatch(editCriteria(group, { day: { days_ago, op } }));
+          }} />
       </Col>
       <Col xs={4}>
         <p>{t("days old")}</p>
@@ -136,6 +142,7 @@ export const LocationSelection = (props: LocationSelectionProps) => {
         <Col xs={4}>
           <input key={JSON.stringify(gtCriteria)}
             type="number"
+            name={`${axis}-number-gt`}
             defaultValue={gtCriteria[axis]}
             onBlur={e => {
               const tempGtCriteria = cloneDeep(gtCriteria);
@@ -155,6 +162,7 @@ export const LocationSelection = (props: LocationSelectionProps) => {
         <Col xs={4}>
           <input key={JSON.stringify(ltCriteria)}
             type="number"
+            name={`${axis}-number-lt`}
             defaultValue={ltCriteria[axis]}
             onBlur={e => {
               const tempLtCriteria = cloneDeep(ltCriteria);
@@ -195,14 +203,19 @@ export class AddCriteria
             <Row>
               <Col xs={5}>
                 <input value={CRITERIA_TYPE_DDI_LOOKUP()[key].label}
+                  name="key"
                   disabled={true} />
               </Col>
               <Col xs={5}>
-                <input value={this.labelLookup(key, value)} disabled={true} />
+                <input value={this.labelLookup(key, value)}
+                  name="value"
+                  disabled={true} />
               </Col>
               <Col xs={2}>
-                <button className="fb-button red" onClick={() => props.dispatch(
-                  toggleStringCriteria(props.group, key, value))}>
+                <button className="fb-button red"
+                  title={t("remove criteria")}
+                  onClick={() => props.dispatch(
+                    toggleStringCriteria(props.group, key, value))}>
                   <i className="fa fa-minus" />
                 </button>
               </Col>
diff --git a/frontend/farm_designer/point_groups/group_list_panel.tsx b/frontend/farm_designer/point_groups/group_list_panel.tsx
index 93f7884d8..ff82f48ce 100644
--- a/frontend/farm_designer/point_groups/group_list_panel.tsx
+++ b/frontend/farm_designer/point_groups/group_list_panel.tsx
@@ -50,6 +50,7 @@ export class RawGroupListPanel extends React.Component<GroupListPanelProps, Stat
         linkTo={"/app/designer/plants/select"}
         title={t("Add group")}>
         <input type="text"
+          name="searchTerm"
           onChange={this.update}
           placeholder={t("Search your groups...")} />
       </DesignerPanelTop>
diff --git a/frontend/farm_designer/points/__tests__/point_edit_actions_test.tsx b/frontend/farm_designer/points/__tests__/point_edit_actions_test.tsx
index 010afe989..d234109d0 100644
--- a/frontend/farm_designer/points/__tests__/point_edit_actions_test.tsx
+++ b/frontend/farm_designer/points/__tests__/point_edit_actions_test.tsx
@@ -47,7 +47,7 @@ describe("<EditPointName />", () => {
 describe("<EditPointLocation />", () => {
   const fakeProps = (): EditPointLocationProps => ({
     updatePoint: jest.fn(),
-    location: { x: 1, y: 2 },
+    xyLocation: { x: 1, y: 2 },
   });
 
   it("edits location", () => {
diff --git a/frontend/farm_designer/points/create_points.tsx b/frontend/farm_designer/points/create_points.tsx
index 6a7c404a7..2c9d8f5b4 100644
--- a/frontend/farm_designer/points/create_points.tsx
+++ b/frontend/farm_designer/points/create_points.tsx
@@ -187,7 +187,7 @@ export class RawCreatePoints
   PointProperties = () =>
     <ul>
       <li>
-        <div>
+        <div className={"point-name-input"}>
           <label>{t("Name")}</label>
           <BlurableInput
             name="name"
@@ -241,6 +241,7 @@ export class RawCreatePoints
   PointActions = () =>
     <Row>
       <button className="fb-button green"
+        title={t("save")}
         onClick={this.createPoint}>
         {t("Save")}
       </button>
@@ -254,6 +255,7 @@ export class RawCreatePoints
           ? t("Delete all of the weeds created through this panel.")
           : t("Delete all of the points created through this panel.")}</p>
         <button className="fb-button red delete"
+          title={t("delete all")}
           onClick={() => {
             if (confirm(type === "weed"
               ? t("Delete all the weeds you have created?")
diff --git a/frontend/farm_designer/points/point_edit_actions.tsx b/frontend/farm_designer/points/point_edit_actions.tsx
index c55e650d0..4a12f3fc6 100644
--- a/frontend/farm_designer/points/point_edit_actions.tsx
+++ b/frontend/farm_designer/points/point_edit_actions.tsx
@@ -27,7 +27,7 @@ export interface EditPointPropertiesProps {
 export const EditPointProperties = (props: EditPointPropertiesProps) =>
   <ul>
     <li>
-      <div>
+      <div className={"point-name-input"}>
         <EditPointName
           name={props.point.body.name}
           updatePoint={props.updatePoint} />
@@ -35,7 +35,7 @@ export const EditPointProperties = (props: EditPointPropertiesProps) =>
     </li>
     <ListItem name={t("Location")}>
       <EditPointLocation
-        location={{ x: props.point.body.x, y: props.point.body.y }}
+        xyLocation={{ x: props.point.body.x, y: props.point.body.y }}
         updatePoint={props.updatePoint} />
     </ListItem>
     <ListItem name={t("Size")}>
@@ -59,15 +59,17 @@ export interface PointActionsProps {
 }
 
 export const PointActions = ({ x, y, z, uuid, dispatch }: PointActionsProps) =>
-  <div>
+  <div className={"point-actions"}>
     <button
       className="fb-button gray no-float"
       type="button"
+      title={t("move to location")}
       onClick={() => getDevice().moveAbsolute({ x, y, z })}>
       {t("Move Device to location")}
     </button>
     <button
       className="fb-button red no-float"
+      title={t("delete")}
       onClick={() => dispatch(destroy(uuid))}>
       {t("Delete")}
     </button>
@@ -84,6 +86,7 @@ export const EditPointName = (props: EditPointNameProps) =>
       <label>{t("Name")}</label>
       <BlurableInput
         type="text"
+        name="name"
         value={props.name}
         onCommit={e => props.updatePoint({ name: e.currentTarget.value })} />
     </Col>
@@ -91,7 +94,7 @@ export const EditPointName = (props: EditPointNameProps) =>
 
 export interface EditPointLocationProps {
   updatePoint(update: Partial<TaggedGenericPointer["body"]>): void;
-  location: Record<"x" | "y", number>;
+  xyLocation: Record<"x" | "y", number>;
 }
 
 export const EditPointLocation = (props: EditPointLocationProps) =>
@@ -101,7 +104,8 @@ export const EditPointLocation = (props: EditPointLocationProps) =>
         <label style={{ marginTop: 0 }}>{t("{{axis}} (mm)", { axis })}</label>
         <BlurableInput
           type="number"
-          value={props.location[axis]}
+          name={axis}
+          value={props.xyLocation[axis]}
           min={0}
           onCommit={e => props.updatePoint({
             [axis]: round(parseIntInput(e.currentTarget.value))
@@ -120,6 +124,7 @@ export const EditPointRadius = (props: EditPointRadiusProps) =>
       <label style={{ marginTop: 0 }}>{t("radius (mm)")}</label>
       <BlurableInput
         type="number"
+        name="radius"
         value={props.radius}
         min={0}
         onCommit={e => props.updatePoint({
diff --git a/frontend/farm_designer/points/point_inventory.tsx b/frontend/farm_designer/points/point_inventory.tsx
index 34b492738..8a4c223ca 100644
--- a/frontend/farm_designer/points/point_inventory.tsx
+++ b/frontend/farm_designer/points/point_inventory.tsx
@@ -50,7 +50,7 @@ export class RawPoints extends React.Component<PointsProps, PointsState> {
         panel={Panel.Points}
         linkTo={"/app/designer/points/add"}
         title={t("Add point")}>
-        <input type="text" onChange={this.update}
+        <input type="text" onChange={this.update} name="searchTerm"
           placeholder={t("Search your points...")} />
       </DesignerPanelTop>
       <DesignerPanelContent panelName={"points"}>
diff --git a/frontend/farm_designer/points/weeds_inventory.tsx b/frontend/farm_designer/points/weeds_inventory.tsx
index 5b5f0881b..63180f06c 100644
--- a/frontend/farm_designer/points/weeds_inventory.tsx
+++ b/frontend/farm_designer/points/weeds_inventory.tsx
@@ -49,7 +49,7 @@ export class RawWeeds extends React.Component<WeedsProps, WeedsState> {
         panel={Panel.Weeds}
         linkTo={"/app/designer/weeds/add"}
         title={t("Add weed")}>
-        <input type="text" onChange={this.update}
+        <input type="text" onChange={this.update} name="searchTerm"
           placeholder={t("Search your weeds...")} />
       </DesignerPanelTop>
       <DesignerPanelContent panelName={"weeds-inventory"}>
diff --git a/frontend/farm_designer/saved_gardens/__tests__/garden_edit_test.tsx b/frontend/farm_designer/saved_gardens/__tests__/garden_edit_test.tsx
index 00457701c..6d5dcee80 100644
--- a/frontend/farm_designer/saved_gardens/__tests__/garden_edit_test.tsx
+++ b/frontend/farm_designer/saved_gardens/__tests__/garden_edit_test.tsx
@@ -12,6 +12,7 @@ jest.mock("../../../api/crud", () => ({
 
 let mockPath = "";
 jest.mock("../../../history", () => ({
+  history: { push: jest.fn() },
   getPathArray: jest.fn(() => mockPath.split("/")),
 }));
 
diff --git a/frontend/farm_designer/saved_gardens/__tests__/garden_snapshot_test.tsx b/frontend/farm_designer/saved_gardens/__tests__/garden_snapshot_test.tsx
index 9d779792a..421bed36e 100644
--- a/frontend/farm_designer/saved_gardens/__tests__/garden_snapshot_test.tsx
+++ b/frontend/farm_designer/saved_gardens/__tests__/garden_snapshot_test.tsx
@@ -46,14 +46,14 @@ describe("<GardenSnapshot />", () => {
     wrapper.find("input").first().simulate("change", {
       currentTarget: { value: "new name" }
     });
-    expect(wrapper.instance().state.name).toEqual("new name");
+    expect(wrapper.instance().state.gardenName).toEqual("new name");
   });
 
   it("creates new garden", () => {
     const wrapper = shallow<GardenSnapshot>(<GardenSnapshot {...fakeProps()} />);
-    wrapper.setState({ name: "new saved garden" });
+    wrapper.setState({ gardenName: "new saved garden" });
     wrapper.find("button").last().simulate("click");
     expect(newSavedGarden).toHaveBeenCalledWith("new saved garden");
-    expect(wrapper.instance().state.name).toEqual("");
+    expect(wrapper.instance().state.gardenName).toEqual("");
   });
 });
diff --git a/frontend/farm_designer/saved_gardens/actions.ts b/frontend/farm_designer/saved_gardens/actions.ts
index a98354d5e..484e46ab8 100644
--- a/frontend/farm_designer/saved_gardens/actions.ts
+++ b/frontend/farm_designer/saved_gardens/actions.ts
@@ -11,8 +11,9 @@ import { t } from "../../i18next_wrapper";
 import { stopTracking } from "../../connectivity/data_consistency";
 
 /** Save all Plant to PlantTemplates in a new SavedGarden. */
-export const snapshotGarden = (name?: string | undefined) =>
-  axios.post<void>(API.current.snapshotPath, name ? { name } : {})
+export const snapshotGarden = (gardenName?: string | undefined) =>
+  axios.post<void>(API.current.snapshotPath, gardenName
+    ? { name: gardenName } : {})
     .then(() => {
       success(t("Garden Saved."));
       history.push("/app/designer/gardens");
@@ -63,9 +64,9 @@ export const openOrCloseGarden = (props: {
       : props.dispatch(closeSavedGarden());
 
 /** Create a new SavedGarden with the chosen name. */
-export const newSavedGarden = (name: string) =>
+export const newSavedGarden = (gardenName: string) =>
   (dispatch: Function) => {
-    dispatch(initSave("SavedGarden", { name: name || "Untitled Garden" }))
+    dispatch(initSave("SavedGarden", { name: gardenName || "Untitled Garden" }))
       .then(() => {
         success(t("Garden Saved."));
         history.push("/app/designer/gardens");
@@ -93,8 +94,8 @@ export const copySavedGarden = ({ newSGName, savedGarden, plantTemplates }: {
 }) =>
   (dispatch: Function) => {
     const sourceSavedGardenId = savedGarden.body.id;
-    const name = newSGName || `${savedGarden.body.name} (${t("copy")})`;
-    dispatch(initSaveGetId(savedGarden.kind, { name }))
+    const gardenName = newSGName || `${savedGarden.body.name} (${t("copy")})`;
+    dispatch(initSaveGetId(savedGarden.kind, { name: gardenName }))
       .then((newSGId: number) => {
         plantTemplates
           .filter(x => x.body.saved_garden_id === sourceSavedGardenId)
diff --git a/frontend/farm_designer/saved_gardens/garden_edit.tsx b/frontend/farm_designer/saved_gardens/garden_edit.tsx
index 9b2476f51..f081803db 100644
--- a/frontend/farm_designer/saved_gardens/garden_edit.tsx
+++ b/frontend/farm_designer/saved_gardens/garden_edit.tsx
@@ -13,7 +13,7 @@ import { Everything } from "../../interfaces";
 import {
   DesignerPanel, DesignerPanelHeader, DesignerPanelContent
 } from "../designer_panel";
-import { getPathArray } from "../../history";
+import { history, getPathArray } from "../../history";
 import { isNumber } from "lodash";
 import { ResourceIndex } from "../../resources/interfaces";
 import { t } from "../../i18next_wrapper";
@@ -28,6 +28,7 @@ const GardenViewButton = (props: GardenViewButtonProps) => {
     : t("view");
   return <button
     className={`fb-button ${gardenIsOpen ? "gray" : "yellow"}`}
+    title={btnText}
     onClick={onClick}>
     {btnText}
   </button>;
@@ -38,6 +39,7 @@ const ApplyGardenButton =
   (props: { plantPointerCount: number, gardenId: number, dispatch: Function }) =>
     <button
       className="fb-button green"
+      title={t("apply garden")}
       onClick={() => props.plantPointerCount > 0
         ? error(trim(`${t("Please clear current garden first.")}
         (${props.plantPointerCount} ${t("plants")})`))
@@ -49,6 +51,7 @@ const DestroyGardenButton =
   (props: { dispatch: Function, gardenUuid: string }) =>
     <button
       className="fb-button red"
+      title={t("delete garden")}
       onClick={() => props.dispatch(destroySavedGarden(props.gardenUuid))}>
       {t("delete")}
     </button>;
@@ -75,6 +78,7 @@ export const mapStateToProps = (props: Everything): EditGardenProps => {
 export class RawEditGarden extends React.Component<EditGardenProps, {}> {
   render() {
     const { savedGarden } = this.props;
+    !savedGarden && history.push("/app/designer/gardens");
     return <DesignerPanel panelName={"saved-garden-edit"}
       panel={Panel.SavedGardens}>
       <DesignerPanelHeader
@@ -84,7 +88,7 @@ export class RawEditGarden extends React.Component<EditGardenProps, {}> {
         backTo={"/app/designer/gardens"} />
       <DesignerPanelContent panelName={"saved-garden-edit"}>
         {savedGarden
-          ? <div>
+          ? <div className={"saved-garden-content"}>
             <Row>
               <label>{t("name")}</label>
               <BlurableInput
diff --git a/frontend/farm_designer/saved_gardens/garden_snapshot.tsx b/frontend/farm_designer/saved_gardens/garden_snapshot.tsx
index 2c906ae38..84948ba2e 100644
--- a/frontend/farm_designer/saved_gardens/garden_snapshot.tsx
+++ b/frontend/farm_designer/saved_gardens/garden_snapshot.tsx
@@ -10,44 +10,46 @@ export interface GardenSnapshotProps {
 }
 
 interface GardenSnapshotState {
-  name: string;
+  gardenName: string;
 }
 
 /** New SavedGarden name input and snapshot/create buttons. */
 export class GardenSnapshot
   extends React.Component<GardenSnapshotProps, GardenSnapshotState> {
-  state = { name: "" };
+  state = { gardenName: "" };
 
   snapshot = () => {
     const { currentSavedGarden, plantTemplates } = this.props;
     !currentSavedGarden
-      ? snapshotGarden(this.state.name)
+      ? snapshotGarden(this.state.gardenName)
       : this.props.dispatch(copySavedGarden({
-        newSGName: this.state.name,
+        newSGName: this.state.gardenName,
         savedGarden: currentSavedGarden,
         plantTemplates
       }));
-    this.setState({ name: "" });
+    this.setState({ gardenName: "" });
   }
 
   new = () => {
-    this.props.dispatch(newSavedGarden(this.state.name));
-    this.setState({ name: "" });
+    this.props.dispatch(newSavedGarden(this.state.gardenName));
+    this.setState({ gardenName: "" });
   };
 
   render() {
     return <div className="garden-snapshot">
       <label>{t("name")}</label>
-      <input
-        onChange={e => this.setState({ name: e.currentTarget.value })}
-        value={this.state.name} />
+      <input name="name"
+        onChange={e => this.setState({ gardenName: e.currentTarget.value })}
+        value={this.state.gardenName} />
       <button
         className={"fb-button gray wide"}
+        title={t("Snapshot current garden")}
         onClick={this.snapshot}>
         {t("Snapshot current garden")}
       </button>
       <button
         className="fb-button green wide"
+        title={t("Add new garden")}
         onClick={this.new}>
         {t("Add new garden")}
       </button>
diff --git a/frontend/farm_designer/saved_gardens/saved_gardens.tsx b/frontend/farm_designer/saved_gardens/saved_gardens.tsx
index 9bcce301e..2e0ff5571 100644
--- a/frontend/farm_designer/saved_gardens/saved_gardens.tsx
+++ b/frontend/farm_designer/saved_gardens/saved_gardens.tsx
@@ -46,7 +46,7 @@ export class RawSavedGardens
           panel={Panel.SavedGardens}
           linkTo={"/app/designer/gardens/add"}
           title={t("Add garden")}>
-          <input type="text" onChange={this.onChange}
+          <input type="text" onChange={this.onChange} name="searchTerm"
             placeholder={t("Search your gardens...")} />
         </DesignerPanelTop>
         <EmptyStateWrapper
@@ -66,6 +66,7 @@ export class RawSavedGardens
 export const SavedGardensLink = () =>
   <button className="fb-button green"
     hidden={true}
+    title={t("open saved gardens panel")}
     onClick={() => history.push("/app/designer/gardens")}>
     {t("Saved Gardens")}
   </button>;
@@ -80,10 +81,12 @@ export const SavedGardenHUD = (props: { dispatch: Function }) =>
   <div className="saved-garden-indicator">
     <label>{t("Viewing saved garden")}</label>
     <button className="fb-button gray"
+      title={t("open saved gardens panel")}
       onClick={() => history.push("/app/designer/gardens")}>
       {t("Menu")}
     </button>
     <button className="fb-button green"
+      title={t("open plants panel")}
       onClick={() => {
         history.push("/app/designer/plants");
         unselectPlant(props.dispatch)();
@@ -91,6 +94,7 @@ export const SavedGardenHUD = (props: { dispatch: Function }) =>
       {t("Edit")}
     </button>
     <button className="fb-button red"
+      title={t("close saved garden")}
       onClick={() => props.dispatch(closeSavedGarden())}>
       {t("Exit")}
     </button>
diff --git a/frontend/farm_designer/tools/add_tool.tsx b/frontend/farm_designer/tools/add_tool.tsx
index 4078e7957..3d1187029 100644
--- a/frontend/farm_designer/tools/add_tool.tsx
+++ b/frontend/farm_designer/tools/add_tool.tsx
@@ -99,6 +99,7 @@ export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
     return <div className={`fb-checkbox ${alreadyAdded ? "disabled" : ""}`}>
       <input type="checkbox" key={JSON.stringify(this.state.toAdd)}
         title={alreadyAdded ? t("Already added.") : ""}
+        name="toolName"
         checked={checked}
         onChange={() => checked
           ? this.remove(toolName)
@@ -118,6 +119,7 @@ export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
       </ul>
       <button
         className="fb-button green"
+        title={t("add selected stock names")}
         onClick={() => {
           this.state.toAdd.filter(this.filterExisting)
             .map(n => this.newTool(n));
@@ -141,6 +143,7 @@ export class RawAddTool extends React.Component<AddToolProps, AddToolState> {
           <ToolSVG toolName={this.state.toolName} />
           <label>{t("Name")}</label>
           <input defaultValue={this.state.toolName}
+            name="name"
             onChange={e =>
               this.setState({ toolName: e.currentTarget.value })} />
           <SaveBtn onClick={this.save} status={SpecialStatus.DIRTY} />
diff --git a/frontend/farm_designer/tools/index.tsx b/frontend/farm_designer/tools/index.tsx
index 820d42578..1e9e1c843 100644
--- a/frontend/farm_designer/tools/index.tsx
+++ b/frontend/farm_designer/tools/index.tsx
@@ -226,7 +226,7 @@ export class RawTools extends React.Component<ToolsProps, ToolsState> {
         panel={Panel.Tools}
         linkTo={!hasTools ? "/app/designer/tools/add" : undefined}
         title={!hasTools ? this.strings.titleText : undefined}>
-        <input type="text" onChange={this.update}
+        <input type="text" onChange={this.update} name="searchTerm"
           placeholder={this.strings.placeholder} />
       </DesignerPanelTop>
       <DesignerPanelContent panelName={"tools"}>
diff --git a/frontend/farm_designer/tools/tool_slot_edit_components.tsx b/frontend/farm_designer/tools/tool_slot_edit_components.tsx
index 6654bcde0..befbeadff 100644
--- a/frontend/farm_designer/tools/tool_slot_edit_components.tsx
+++ b/frontend/farm_designer/tools/tool_slot_edit_components.tsx
@@ -19,7 +19,7 @@ export interface GantryMountedInputProps {
 export const GantryMountedInput = (props: GantryMountedInputProps) =>
   <fieldset className="gantry-mounted-input">
     <label>{t("Gantry-mounted")}</label>
-    <input type="checkbox"
+    <input type="checkbox" name="gantry_mounted"
       onChange={() => props.onChange({ gantry_mounted: !props.gantryMounted })}
       checked={props.gantryMounted} />
   </fieldset>;
@@ -120,7 +120,7 @@ export const SlotLocationInputRow = (props: SlotLocationInputRowProps) =>
           <Col xs={4} key={axis}>
             <label>{t("{{axis}} (mm)", { axis })}</label>
             {axis == "x" && props.gantryMounted
-              ? <input disabled value={t("Gantry")} />
+              ? <input disabled value={t("Gantry")} name={axis} />
               : <BlurableInput
                 type="number"
                 value={props.slotLocation[axis]}
diff --git a/frontend/farm_designer/zones/zones_inventory.tsx b/frontend/farm_designer/zones/zones_inventory.tsx
index 93d77ea7c..650179102 100644
--- a/frontend/farm_designer/zones/zones_inventory.tsx
+++ b/frontend/farm_designer/zones/zones_inventory.tsx
@@ -53,7 +53,7 @@ export class RawZones extends React.Component<ZonesProps, ZonesState> {
         }))
           .then((id: number) => this.navigate(id)).catch(() => { })}
         title={t("Add zone")}>
-        <input type="text" onChange={this.update}
+        <input type="text" onChange={this.update} name="searchTerm"
           placeholder={t("Search your zones...")} />
       </DesignerPanelTop>
       <DesignerPanelContent panelName={"zones-inventory"}>
diff --git a/frontend/farmware/farmware_config_menu.tsx b/frontend/farmware/farmware_config_menu.tsx
index bcffab66e..caecf2044 100644
--- a/frontend/farmware/farmware_config_menu.tsx
+++ b/frontend/farmware/farmware_config_menu.tsx
@@ -22,6 +22,7 @@ export function FarmwareConfigMenu(props: FarmwareConfigMenuProps) {
       </label>
       <button
         className="fb-button gray fa fa-download"
+        title={t("reinstall first-party Farmware")}
         onClick={() => {
           const p = getDevice().installFirstPartyFarmware();
           p?.catch(commandErr("Farmware installation"));
@@ -34,6 +35,7 @@ export function FarmwareConfigMenu(props: FarmwareConfigMenuProps) {
       </label>
       <button
         className={"fb-button fb-toggle-button " + listBtnColor}
+        title={t("toggle show first-party Farmware")}
         onClick={() => props.dispatch(
           toggleWebAppBool(BooleanSetting.show_first_party_farmware))} />
     </fieldset>
@@ -44,6 +46,7 @@ export function FarmwareConfigMenu(props: FarmwareConfigMenuProps) {
         </label>
         <button
           className={"fb-button red fa fa-trash"}
+          title={t("delete all data")}
           onClick={() => destroyAll("FarmwareEnv")
             .then(() => success(t("Farmware data successfully deleted.")))
             .catch(() => error(t("Error deleting Farmware data")))} />
diff --git a/frontend/farmware/farmware_forms.tsx b/frontend/farmware/farmware_forms.tsx
index 7774d2683..fea546258 100644
--- a/frontend/farmware/farmware_forms.tsx
+++ b/frontend/farmware/farmware_forms.tsx
@@ -54,7 +54,7 @@ export function ConfigFields(props: {
   }
 
   const { farmware, getValue } = props;
-  return <div>
+  return <div className={"farmware-config-fields"}>
     {farmware.config.map(config => {
       const configEnvName =
         getConfigEnvName(farmware.name, config.name);
@@ -93,6 +93,7 @@ export function FarmwareForm(props: FarmwareFormProps): JSX.Element {
       <button
         className="fb-button green farmware-button"
         disabled={!props.botOnline}
+        title={t("Run Farmware")}
         onClick={() => run(farmware.name, farmware.config)}>
         {t("Run")}
       </button>
diff --git a/frontend/farmware/farmware_info.tsx b/frontend/farmware/farmware_info.tsx
index 6b0a3351c..c5cea4b51 100644
--- a/frontend/farmware/farmware_info.tsx
+++ b/frontend/farmware/farmware_info.tsx
@@ -44,11 +44,11 @@ const removeFromAPI = (props: {
 const FarmwareToolsVersionField =
   ({ version }: { version: string | undefined }) =>
     (version && version != "latest")
-      ? <div>
+      ? <div className={"farmware-tools-version"}>
         <label>{t("Farmware Tools version")}</label>
         <p>{version}</p>
       </div>
-      : <div />;
+      : <div className={"farmware-tools-version"} />;
 
 const PendingInstallNameError =
   ({ url, installations }: {
@@ -64,11 +64,12 @@ const PendingInstallNameError =
         <p>{packageError}</p>
         <button
           className="fb-button red no-float"
+          title={t("retry fetch package name")}
           onClick={() => retryFetchPackageName(installation.body.id)}>
           {t("Retry")}
         </button>
       </div>
-      : <div />;
+      : <div className={"no-install-error"} />;
   };
 
 type RemoveFarmwareFunction =
@@ -79,20 +80,22 @@ const FarmwareManagementSection =
     farmware: FarmwareManifestInfo,
     remove: RemoveFarmwareFunction,
   }) =>
-    <div>
+    <div className={"farmware-management-section"}>
       <Popover usePortal={false}>
         <label>{t("Manage")}</label>
         <div className="farmware-url">{farmware.url}</div>
       </Popover>
-      <div>
+      <div className={"farmware-management-buttons"}>
         <button
           className="fb-button yellow no-float"
           disabled={isPendingInstallation(farmware)}
+          title={t("update Farmware")}
           onClick={update(farmware.name)}>
           {t("Update")}
         </button>
         <button
           className="fb-button red no-float"
+          title={t("remove Farmware")}
           onClick={remove(farmware.name, farmware.url)}>
           {t("Remove")}
         </button>
@@ -137,25 +140,29 @@ const uninstallFarmware = (props: RemoveFarmwareProps) =>
 
 export function FarmwareInfo(props: FarmwareInfoProps) {
   const { farmware } = props;
-  return farmware ? <div className="farmware-info">
-    <label>{t("Description")}</label>
-    <p>{farmware.meta.description}</p>
-    <label>{t("Version")}</label>
-    <p>{farmware.meta.version}</p>
-    <label>{t("Min OS version required")}</label>
-    <p>{farmware.meta.fbos_version}</p>
-    <FarmwareToolsVersionField version={farmware.meta.farmware_tools_version} />
-    <label>{t("Language")}</label>
-    <p>{farmware.meta.language}</p>
-    <label>{t("Author")}</label>
-    <p>{farmware.meta.author === "Farmbot.io"
-      ? "FarmBot, Inc."
-      : farmware.meta.author}</p>
-    <FarmwareManagementSection
-      farmware={farmware}
-      remove={uninstallFarmware(props)} />
-    <PendingInstallNameError
-      url={farmware.url}
-      installations={props.installations} />
-  </div> : <div><p>{t(Content.NOT_AVAILABLE_WHEN_OFFLINE)}</p></div>;
+  return farmware
+    ? <div className="farmware-info">
+      <label>{t("Description")}</label>
+      <p>{farmware.meta.description}</p>
+      <label>{t("Version")}</label>
+      <p>{farmware.meta.version}</p>
+      <label>{t("Min OS version required")}</label>
+      <p>{farmware.meta.fbos_version}</p>
+      <FarmwareToolsVersionField version={farmware.meta.farmware_tools_version} />
+      <label>{t("Language")}</label>
+      <p>{farmware.meta.language}</p>
+      <label>{t("Author")}</label>
+      <p>{farmware.meta.author === "Farmbot.io"
+        ? "FarmBot, Inc."
+        : farmware.meta.author}</p>
+      <FarmwareManagementSection
+        farmware={farmware}
+        remove={uninstallFarmware(props)} />
+      <PendingInstallNameError
+        url={farmware.url}
+        installations={props.installations} />
+    </div>
+    : <div className={"no-farmware-info"}>
+      <p>{t(Content.NOT_AVAILABLE_WHEN_OFFLINE)}</p>
+    </div>;
 }
diff --git a/frontend/farmware/farmware_list.tsx b/frontend/farmware/farmware_list.tsx
index a1e1de12d..2f3250677 100644
--- a/frontend/farmware/farmware_list.tsx
+++ b/frontend/farmware/farmware_list.tsx
@@ -118,12 +118,13 @@ export class FarmwareList
         {t("Install new Farmware")}
       </label>
       <fieldset>
-        <input type="url"
+        <input type="url" name="url"
           placeholder={"https://...."}
           value={this.state.packageUrl || ""}
           onChange={e => this.setState({ packageUrl: e.currentTarget.value })} />
         <button
           className="fb-button green"
+          title={t("install Farmware")}
           onClick={this.install}>
           {t("Install")}
         </button>
diff --git a/frontend/farmware/images/image_flipper.tsx b/frontend/farmware/images/image_flipper.tsx
index 3730429a4..1f77dfe54 100644
--- a/frontend/farmware/images/image_flipper.tsx
+++ b/frontend/farmware/images/image_flipper.tsx
@@ -29,7 +29,7 @@ export class ImageFlipper extends
       const url = image.body.attachment_processed_at
         ? image.body.attachment_url
         : PLACEHOLDER_FARMBOT;
-      return <div>
+      return <div className={"image-jsx"}>
         {!this.state.isLoaded &&
           <PlaceholderImg
             textOverlay={t("Image loading (try refreshing)")} />}
@@ -67,12 +67,14 @@ export class ImageFlipper extends
       <this.imageJSX />
       <button
         onClick={this.go(1)}
+        title={t("previous image")}
         disabled={!multipleImages || this.state.disablePrev}
         className="image-flipper-left fb-button">
         {t("Prev")}
       </button>
       <button
         onClick={this.go(-1)}
+        title={t("next image")}
         disabled={!multipleImages || this.state.disableNext}
         className="image-flipper-right fb-button">
         {t("Next")}
diff --git a/frontend/farmware/images/photos.tsx b/frontend/farmware/images/photos.tsx
index 6436973a2..b7d38b4ec 100644
--- a/frontend/farmware/images/photos.tsx
+++ b/frontend/farmware/images/photos.tsx
@@ -33,7 +33,7 @@ interface MetaInfoProps {
 function MetaInfo({ obj, attr, label }: MetaInfoProps) {
   const top = label || startCase(attr.split("_").join());
   const bottom = safeStringFetch(obj, attr);
-  return <div>
+  return <div className={"meta-info"}>
     <label>{top}:</label>
     <span>{bottom || t("unknown")}</span>
   </div>;
@@ -71,6 +71,7 @@ const PhotoButtons = (props: PhotoButtonsProps) => {
     </MustBeOnline>
     <button
       className="fb-button red"
+      title={t("Delete Photo")}
       onClick={props.deletePhoto}>
       {t("Delete Photo")}
     </button>
diff --git a/frontend/farmware/index.tsx b/frontend/farmware/index.tsx
index 29f4482b4..35a972aa1 100644
--- a/frontend/farmware/index.tsx
+++ b/frontend/farmware/index.tsx
@@ -102,10 +102,11 @@ interface BasicFarmwarePageProps {
 
 export const BasicFarmwarePage = ({ farmwareName, farmware, botOnline }:
   BasicFarmwarePageProps) =>
-  <div>
+  <div className={"basic-farmware-page"}>
     <button
       className="fb-button green farmware-button"
       disabled={isPendingInstallation(farmware) || !botOnline}
+      title={t("Run Farmware")}
       onClick={run(farmwareName)}>
       {t("Run")}
     </button>
@@ -208,6 +209,7 @@ export class RawFarmwarePage extends React.Component<FarmwareProps, {}> {
     <button
       className={`farmware-info-button fb-button gray ${props.className}`}
       disabled={!props.online}
+      title={t("open Farmware info")}
       onClick={() => this.props.dispatch({
         type: Actions.SET_FARMWARE_INFO_STATE, payload: true
       })}>
diff --git a/frontend/farmware/state_to_props.ts b/frontend/farmware/state_to_props.ts
index d5e61e094..99a2415c4 100644
--- a/frontend/farmware/state_to_props.ts
+++ b/frontend/farmware/state_to_props.ts
@@ -98,12 +98,12 @@ export function mapStateToProps(props: Everything): FarmwareProps {
   });
   shouldDisplay(Feature.api_farmware_installations) &&
     taggedFarmwareInstallations.map(x => {
-      const name = namePendingInstall(x.body.package, x.body.id);
-      const alreadyAdded = Object.keys(farmwares).includes(x.body.package || name);
+      const n = namePendingInstall(x.body.package, x.body.id);
+      const alreadyAdded = Object.keys(farmwares).includes(x.body.package || n);
       const alreadyInstalled = Object.values(farmwares)
         .map(fw => fw.url).includes(x.body.url);
       if (x.body.id && !alreadyAdded && !alreadyInstalled) {
-        farmwares[name] = manifestInfoPending(name, x.body.url);
+        farmwares[n] = manifestInfoPending(n, x.body.url);
       }
     });
 
diff --git a/frontend/farmware/weed_detector/config.tsx b/frontend/farmware/weed_detector/config.tsx
index 3383c3b32..acfa7b848 100644
--- a/frontend/farmware/weed_detector/config.tsx
+++ b/frontend/farmware/weed_detector/config.tsx
@@ -22,7 +22,7 @@ export class WeedDetectorConfig extends React.Component<SettingsMenuProps, {}> {
     conf: keyof WD_ENV;
     label: string;
   }) => {
-    return <div>
+    return <div className={"camera-config-number-box"}>
       <label htmlFor={conf}>
         {label}
       </label>
@@ -115,6 +115,7 @@ export const BoolConfig = (props: BoolConfigProps) =>
     </label>
     <input
       type="checkbox"
+      name={props.configKey}
       id={props.configKey}
       checked={!!envGet(props.configKey, props.wDEnv)}
       onChange={e =>
diff --git a/frontend/farmware/weed_detector/farmbot_picker.tsx b/frontend/farmware/weed_detector/farmbot_picker.tsx
index 45eaf043d..bf5a55bd2 100644
--- a/frontend/farmware/weed_detector/farmbot_picker.tsx
+++ b/frontend/farmware/weed_detector/farmbot_picker.tsx
@@ -84,7 +84,7 @@ export class FarmbotColorPicker extends React.Component<FarmbotPickerProps, {}>
     return { ...selectedCSS, width, height, top, left };
   }
 
-  customPointer = () => <div />;
+  customPointer = () => <div className={"no-custom-pointer"} />;
 
   render() {
     const H_AVG = !!this.props.invertHue
diff --git a/frontend/farmware/weed_detector/index.tsx b/frontend/farmware/weed_detector/index.tsx
index aa4d8c8db..75a59f9db 100644
--- a/frontend/farmware/weed_detector/index.tsx
+++ b/frontend/farmware/weed_detector/index.tsx
@@ -72,6 +72,7 @@ export class WeedDetector
           </button>
         </MustBeOnline>
         <button
+          title={t("clear weeds")}
           onClick={this.clearWeeds}
           className="fb-button red">
           {this.state.deletionProgress || t("CLEAR WEEDS")}
diff --git a/frontend/folders/actions.ts b/frontend/folders/actions.ts
index eac3583da..68e269657 100644
--- a/frontend/folders/actions.ts
+++ b/frontend/folders/actions.ts
@@ -31,11 +31,11 @@ export const setFolderColor = (id: number, color: Color) => {
   d(save(f.uuid));
 };
 
-export const setFolderName = (id: number, name: string) => {
+export const setFolderName = (id: number, folderName: string) => {
   const d = store.dispatch as Function;
   const { index } = store.getState().resources;
   const folder = findFolderById(index, id);
-  const action = edit(folder, { name });
+  const action = edit(folder, { name: folderName });
   d(action);
   return d(save(folder.uuid)) as Promise<{}>;
 };
diff --git a/frontend/folders/component.tsx b/frontend/folders/component.tsx
index f00381c05..02b009706 100644
--- a/frontend/folders/component.tsx
+++ b/frontend/folders/component.tsx
@@ -84,7 +84,9 @@ export const FolderListItem = (props: FolderItemProps) => {
 };
 
 const ToggleFolderBtn = (props: ToggleFolderBtnProps) => {
-  return <button className="fb-button gray" onClick={props.onClick}>
+  return <button className="fb-button gray"
+    title={t("toggle folder open")}
+    onClick={props.onClick}>
     <i className={`fa fa-chevron-${props.expanded ? "right" : "down"}`} />
   </button>;
 };
@@ -92,6 +94,7 @@ const ToggleFolderBtn = (props: ToggleFolderBtnProps) => {
 const AddFolderBtn = ({ folder, close }: AddFolderBtn) => {
   return <button
     className="fb-button green"
+    title={t("Create subfolder")}
     onClick={() => { close?.(); createFolder(folder); }}>
     <div className="fa-stack fa-2x" title={"Create Subfolder"}>
       <i className="fa fa-folder fa-stack-2x" />
@@ -103,6 +106,7 @@ const AddFolderBtn = ({ folder, close }: AddFolderBtn) => {
 const AddSequenceBtn = ({ folderId, close }: AddSequenceProps) => {
   return <button
     className="fb-button green"
+    title={t("add new sequence")}
     onClick={() => { close?.(); addNewSequenceToFolder(folderId); }}>
     <div className="fa-stack fa-2x">
       <i className="fa fa-server fa-stack-2x" />
@@ -116,11 +120,13 @@ export const FolderButtonCluster =
     return <div className="folder-button-cluster">
       <button
         className="fb-button red"
+        title={t("delete folder")}
         onClick={() => deleteFolder(node.id)}>
         <i className="fa fa-trash" />
       </button>
       <button
         className="fb-button gray"
+        title={t("edit folder")}
         onClick={() => { close(); toggleFolderEditState(node.id); }}>
         <i className="fa fa-pencil" />
       </button>
@@ -139,6 +145,7 @@ export const FolderNameInput = ({ node }: FolderNameInputProps) =>
       }} />
     <button
       className="fb-button green"
+      title={t("save folder name")}
       onClick={() => toggleFolderEditState(node.id)}>
       <i className="fa fa-check" />
     </button>
@@ -327,7 +334,7 @@ export const FolderPanelTop = (props: FolderPanelTopProps) =>
         <input
           value={props.searchTerm || ""}
           onChange={e => updateSearchTerm(e.currentTarget.value)}
-          type="text"
+          type="text" name="searchTerm"
           placeholder={t("Search sequences...")} />
       </div>
     </div>
diff --git a/frontend/front_page/create_account.tsx b/frontend/front_page/create_account.tsx
index a4420daa4..b45978448 100644
--- a/frontend/front_page/create_account.tsx
+++ b/frontend/front_page/create_account.tsx
@@ -44,13 +44,14 @@ interface FormFieldProps {
   onCommit(val: string): void;
 }
 
-export const FormField = (props: FormFieldProps) => <div>
-  <label> {t(props.label)} </label>
-  <BlurableInput
-    value={props.value}
-    type={props.type}
-    onCommit={(e) => props.onCommit(e.currentTarget.value)} />
-</div>;
+export const FormField = (props: FormFieldProps) =>
+  <div className={"account-form-field"}>
+    <label> {t(props.label)} </label>
+    <BlurableInput
+      value={props.value}
+      type={props.type}
+      onCommit={(e) => props.onCommit(e.currentTarget.value)} />
+  </div>;
 
 interface FieldData {
   label: string,
@@ -94,6 +95,7 @@ export function MustRegister(props: CreateAccountProps) {
       {props.children}
       <Row>
         <button
+          title={t("Create Account")}
           className="fb-button green front-page-button">
           {t("Create Account")}
         </button>
diff --git a/frontend/front_page/forgot_password.tsx b/frontend/front_page/forgot_password.tsx
index 705c1cbcb..dd0969c48 100644
--- a/frontend/front_page/forgot_password.tsx
+++ b/frontend/front_page/forgot_password.tsx
@@ -22,6 +22,7 @@ export function ForgotPassword(props: ForgotPasswordProps) {
       <WidgetHeader title={"Reset Password"}>
         <button
           className="fb-button gray"
+          title={t("go back")}
           onClick={onGoBack}>
           {t("BACK")}
         </button>
@@ -35,6 +36,7 @@ export function ForgotPassword(props: ForgotPasswordProps) {
             onCommit={onEmailChange} />
           <Row>
             <button
+              title={t("Reset Password")}
               className="fb-button green front-page-button">
               {t("Reset Password")}
             </button>
diff --git a/frontend/front_page/front_page.tsx b/frontend/front_page/front_page.tsx
index ae1c15241..21fdf1a6b 100644
--- a/frontend/front_page/front_page.tsx
+++ b/frontend/front_page/front_page.tsx
@@ -38,19 +38,19 @@ export interface PartialFormEvent {
 
 /** Set value for front page state field (except for "activePanel"). */
 export const setField =
-  (name: keyof Omit<FrontPageState, "activePanel">, cb: SetterCB) =>
+  (field: keyof Omit<FrontPageState, "activePanel">, cb: SetterCB) =>
     (event: PartialFormEvent) => {
       const state: Partial<FrontPageState> = {};
 
-      switch (name) {
+      switch (field) {
         // Booleans
         case "agreeToTerms":
         case "registrationSent":
-          state[name] = event.currentTarget.checked;
+          state[field] = event.currentTarget.checked;
           break;
         // all others (string)
         default:
-          state[name] = event.currentTarget.value;
+          state[field] = event.currentTarget.value;
       }
       cb(state);
     };
@@ -259,5 +259,9 @@ export class FrontPage extends React.Component<{}, Partial<FrontPageState>> {
     </div>;
   }
 
-  render() { return Session.fetchStoredToken() ? <div /> : this.defaultContent(); }
+  render() {
+    return Session.fetchStoredToken()
+      ? <div className={"app-loading"} />
+      : this.defaultContent();
+  }
 }
diff --git a/frontend/front_page/login.tsx b/frontend/front_page/login.tsx
index ac0b4fbe5..d803f9126 100644
--- a/frontend/front_page/login.tsx
+++ b/frontend/front_page/login.tsx
@@ -75,11 +75,14 @@ export class Login extends React.Component<LoginProps, {}> {
             <BlurablePassword
               name="login_password"
               onCommit={onLoginPasswordChange} />
-            <a className="forgot-password" onClick={onToggleForgotPassword}>
+            <a className="forgot-password"
+              title={t("Forgot password?")}
+              onClick={onToggleForgotPassword}>
               {t("Forgot password?")}
             </a>
             <Row>
-              <button className="fb-button green pull-right front-page-button">
+              <button className="fb-button green pull-right front-page-button"
+                title={t("Login")}>
                 {t("Login")}
               </button>
             </Row>
diff --git a/frontend/front_page/resend_panel_body.tsx b/frontend/front_page/resend_panel_body.tsx
index a227e017b..7bf6325dd 100644
--- a/frontend/front_page/resend_panel_body.tsx
+++ b/frontend/front_page/resend_panel_body.tsx
@@ -16,6 +16,7 @@ export function ResendPanelBody(props: { onClick(): void; }) {
       <Row>
         <button onClick={props.onClick}
           type="button"
+          title={t("Resend Verification Email")}
           className="fb-button green pull-right front-page-button">
           {t("Resend Verification Email")}
         </button>
diff --git a/frontend/front_page/resend_verification.tsx b/frontend/front_page/resend_verification.tsx
index 16cac44ca..2beaef07b 100644
--- a/frontend/front_page/resend_verification.tsx
+++ b/frontend/front_page/resend_verification.tsx
@@ -29,6 +29,7 @@ export class ResendVerification extends React.Component<Props, State> {
         <WidgetHeader title={t("Account Not Verified")}>
           <button onClick={this.props.onGoBack}
             type="button"
+            title={t("go back")}
             className="fb-button gray pull-right front-page-button">
             {t("back")}
           </button>
diff --git a/frontend/front_page/terms_checkbox.tsx b/frontend/front_page/terms_checkbox.tsx
index 7751040e6..cec89923e 100644
--- a/frontend/front_page/terms_checkbox.tsx
+++ b/frontend/front_page/terms_checkbox.tsx
@@ -13,7 +13,7 @@ export const TermsCheckbox = (props: {
     <a href={props.privUrl} target="_blank">{t("Privacy Policy")}</a>
     {` ${t("and")} `}
     <a href={props.tosUrl} target="_blank">{t("Terms of Use")}</a>
-    <input type="checkbox"
+    <input type="checkbox" name="tos"
       onChange={props.onChange}
       value={props.agree ? "false" : "true"} />
   </div>;
diff --git a/frontend/help/__tests__/tour_test.tsx b/frontend/help/__tests__/tour_test.tsx
index 38be5e14e..35fbb279e 100644
--- a/frontend/help/__tests__/tour_test.tsx
+++ b/frontend/help/__tests__/tour_test.tsx
@@ -13,7 +13,7 @@ import { history } from "../../history";
 import { CallBackProps } from "react-joyride";
 
 describe("<RunTour />", () => {
-  const EMPTY_DIV = "<div></div>";
+  const EMPTY_DIV = "<div class=\"tour-inactive\"></div>";
 
   it("tour is running", () => {
     const wrapper = mount(<RunTour currentTour={tourNames()[0].name} />);
diff --git a/frontend/help/docs.tsx b/frontend/help/docs.tsx
index 8ad5a5c2d..b6d37d933 100644
--- a/frontend/help/docs.tsx
+++ b/frontend/help/docs.tsx
@@ -18,11 +18,13 @@ export const DocsWidget = () =>
   <Widget className="documentation-widget">
     <WidgetHeader title={t("Documentation")} />
     <WidgetBody>
-      <div>
+      <div className={"general-doc-links"}>
         <label>{t("General")}</label>
-        <div>{documentationLink("the-farmbot-web-app", "Web App")}</div>
+        <div className={"web-app-doc-link"}>
+          {documentationLink("the-farmbot-web-app", "Web App")}
+        </div>
       </div>
-      <div>
+      <div className={"specific-doc-links"}>
         <label>{t("Topics")}</label>
         {Object.entries(DOC_SLUGS).map(documentationLinkMapper)}
       </div>
diff --git a/frontend/help/tour.tsx b/frontend/help/tour.tsx
index 3f2e6408f..d2a2f712b 100644
--- a/frontend/help/tour.tsx
+++ b/frontend/help/tour.tsx
@@ -82,5 +82,7 @@ export class Tour extends React.Component<TourProps, TourState> {
 }
 
 export const RunTour = ({ currentTour }: { currentTour: string | undefined }) => {
-  return currentTour ? <Tour steps={TOUR_STEPS()[currentTour]} /> : <div />;
+  return currentTour
+    ? <Tour steps={TOUR_STEPS()[currentTour]} />
+    : <div className={"tour-inactive"} />;
 };
diff --git a/frontend/help/tour_list.tsx b/frontend/help/tour_list.tsx
index 5335cea1c..345992405 100644
--- a/frontend/help/tour_list.tsx
+++ b/frontend/help/tour_list.tsx
@@ -9,6 +9,7 @@ export const TourList = ({ dispatch }: { dispatch: Function }) =>
     {tourNames().map(tour => <div key={tour.name}>
       <label>{tour.description}</label>
       <button className="fb-button green"
+        title={t("Start tour")}
         onClick={() =>
           dispatch({ type: Actions.START_TOUR, payload: tour.name })}>
         {t("Start tour")}
diff --git a/frontend/logs/components/filter_menu.tsx b/frontend/logs/components/filter_menu.tsx
index 74cafce74..8a5da3c0b 100644
--- a/frontend/logs/components/filter_menu.tsx
+++ b/frontend/logs/components/filter_menu.tsx
@@ -45,10 +45,14 @@ export const LogsFilterMenu = (props: LogsFilterMenuProps) => {
       <label>
         {t("Presets:")}
       </label>
-      <button className={`fb-button gray`} onClick={setAll(3)}>
+      <button className={`fb-button gray`}
+        title={t("show all")}
+        onClick={setAll(3)}>
         {t("max")}
       </button>
-      <button className={`fb-button gray`} onClick={setAll(1)}>
+      <button className={`fb-button gray`}
+        title={t("default")}
+        onClick={setAll(1)}>
         {t("normal")}
       </button>
     </fieldset>
@@ -61,6 +65,7 @@ export const LogsFilterMenu = (props: LogsFilterMenuProps) => {
           </label>
           <button
             className={"fb-button fb-toggle-button " + btnColor(logType)}
+            title={t("toggle logs")}
             onClick={props.toggle(logType)} />
           <Slider min={0} max={3} stepSize={1}
             onChange={props.setFilterLevel(logType)}
diff --git a/frontend/logs/components/settings_menu.tsx b/frontend/logs/components/settings_menu.tsx
index 3c933ee41..48dadae13 100644
--- a/frontend/logs/components/settings_menu.tsx
+++ b/frontend/logs/components/settings_menu.tsx
@@ -58,10 +58,10 @@ const LOG_SETTING_NAMES = SEQUENCE_LOG_SETTINGS().map(s => s.setting)
 const LogSetting = (props: LogSettingProps) => {
   const { label, setting, toolTip, setFilterLevel, sourceFbosConfig } = props;
   /** Update the current filter level to a minimum needed for log display. */
-  const updateMinFilterLevel = (name: keyof Filters, level: number) => {
+  const updateMinFilterLevel = (key: keyof Filters, level: number) => {
     const currentLevel =
-      props.getConfigValue(safeNumericSetting(name + "_log")) || 0;
-    if (currentLevel < level) { setFilterLevel(name)(level); }
+      props.getConfigValue(safeNumericSetting(key + "_log")) || 0;
+    if (currentLevel < level) { setFilterLevel(key)(level); }
   };
   const config = sourceFbosConfig(setting);
   return <fieldset>
diff --git a/frontend/logs/index.tsx b/frontend/logs/index.tsx
index a6a5e13ed..2cbd8e013 100644
--- a/frontend/logs/index.tsx
+++ b/frontend/logs/index.tsx
@@ -28,11 +28,11 @@ export const formatLogTime =
 export class RawLogs extends React.Component<LogsProps, Partial<LogsState>> {
 
   /** Initialize log type verbosity level to the configured or default value. */
-  initialize = (name: NumberConfigKey, defaultValue: number): number => {
-    const currentValue = this.props.getConfigValue(safeNumericSetting(name));
+  initialize = (key: NumberConfigKey, defaultValue: number): number => {
+    const currentValue = this.props.getConfigValue(safeNumericSetting(key));
     if (isUndefined(currentValue)) {
       this.props.dispatch(
-        setWebAppConfigValue(safeNumericSetting(name), defaultValue));
+        setWebAppConfigValue(safeNumericSetting(key), defaultValue));
       return defaultValue;
     } else {
       return currentValue as number;
@@ -54,22 +54,22 @@ export class RawLogs extends React.Component<LogsProps, Partial<LogsState>> {
   };
 
   /** Toggle display of a log type. Verbosity level 0 hides all, 3 shows all.*/
-  toggle = (name: keyof Filters) => {
+  toggle = (key: keyof Filters) => {
     // If log type is off, set it to verbosity level 1, otherwise turn it off
-    const newSetting = this.state[name] === 0 ? 1 : 0;
+    const newSetting = this.state[key] === 0 ? 1 : 0;
     return () => {
-      this.setState({ [name]: newSetting });
+      this.setState({ [key]: newSetting });
       this.props.dispatch(
-        setWebAppConfigValue(safeNumericSetting(name + "_log"), newSetting));
+        setWebAppConfigValue(safeNumericSetting(key + "_log"), newSetting));
     };
   };
 
   /** Set log type filter level. i.e., level 2 shows verbosity 2 and lower.*/
-  setFilterLevel = (name: keyof Filters) => {
+  setFilterLevel = (key: keyof Filters) => {
     return (value: number) => {
-      this.setState({ [name]: value });
+      this.setState({ [key]: value });
       this.props.dispatch(
-        setWebAppConfigValue(safeNumericSetting(name + "_log"), value));
+        setWebAppConfigValue(safeNumericSetting(key + "_log"), value));
     };
   };
 
@@ -105,7 +105,8 @@ export class RawLogs extends React.Component<LogsProps, Partial<LogsState>> {
           </div>
           <div className={"settings-menu-button"}>
             <Popover position={Position.TOP_RIGHT}>
-              <button className={`fb-button ${filterBtnColor}`}>
+              <button className={`fb-button ${filterBtnColor}`}
+                title={t("edit filter settings")}>
                 {this.filterActive ? t("Filters active") : t("filter")}
               </button>
               <LogsFilterMenu
@@ -127,7 +128,7 @@ export class RawLogs extends React.Component<LogsProps, Partial<LogsState>> {
           <div className="thin-search-wrapper">
             <div className="text-input-wrapper">
               <i className="fa fa-search" />
-              <input
+              <input name="searchTerm"
                 onChange={e =>
                   this.setState({ searchTerm: e.currentTarget.value })}
                 placeholder={t("Search logs...")} />
diff --git a/frontend/nav/additional_menu.tsx b/frontend/nav/additional_menu.tsx
index f9e627495..d5d5ec10d 100644
--- a/frontend/nav/additional_menu.tsx
+++ b/frontend/nav/additional_menu.tsx
@@ -7,13 +7,13 @@ import { ExternalUrl } from "../external_urls";
 
 export const AdditionalMenu = (props: AccountMenuProps) => {
   return <div className="nav-additional-menu">
-    <div>
+    <div className={"account-link"}>
       <Link to="/app/account" onClick={props.close("accountMenuOpen")}>
         <i className="fa fa-cog" />
         {t("Account Settings")}
       </Link>
     </div>
-    <div>
+    <div className={"logs-link"}>
       <Link to="/app/logs" onClick={props.close("accountMenuOpen")}>
         <i className="fa fa-list" />
         {t("Logs")}
@@ -23,8 +23,8 @@ export const AdditionalMenu = (props: AccountMenuProps) => {
       <i className="fa fa-question-circle" />
       {t("Help")}
     </Link>
-    <div>
-      <a onClick={props.logout}>
+    <div className={"logout-link"}>
+      <a onClick={props.logout} title={t("logout")}>
         <i className="fa fa-sign-out" />
         {t("Logout")}
       </a>
diff --git a/frontend/nav/index.tsx b/frontend/nav/index.tsx
index ba2ba0a6a..6d6645b27 100644
--- a/frontend/nav/index.tsx
+++ b/frontend/nav/index.tsx
@@ -35,11 +35,11 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
 
   logout = () => Session.clear();
 
-  toggle = (name: keyof NavBarState) => () =>
-    this.setState({ [name]: !this.state[name] });
+  toggle = (key: keyof NavBarState) => () =>
+    this.setState({ [key]: !this.state[key] });
 
-  close = (name: keyof NavBarState) => () =>
-    this.setState({ [name]: false });
+  close = (key: keyof NavBarState) => () =>
+    this.setState({ [key]: false });
 
   ReadOnlyStatus = () =>
     <ReadOnlyIcon locked={!!this.props.getConfigValue(
@@ -103,7 +103,7 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
     const { close } = this;
     const { mobileMenuOpen } = this.state;
     const { alertCount } = this.props;
-    return <div>
+    return <div className={"app-nav-links"}>
       <i className={"fa fa-bars mobile-menu-icon"}
         onClick={this.toggle("mobileMenuOpen")} />
       <span className="mobile-menu-container">
@@ -130,7 +130,7 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
         <nav role="navigation">
           <Row>
             <Col xs={12}>
-              <div>
+              <div className={"nav-bar"}>
                 <TickerList {...tickerListProps} />
                 <div className="nav-group">
                   <div className="nav-left">
diff --git a/frontend/nav/mobile_menu.tsx b/frontend/nav/mobile_menu.tsx
index c7b33686f..33ea86708 100644
--- a/frontend/nav/mobile_menu.tsx
+++ b/frontend/nav/mobile_menu.tsx
@@ -8,7 +8,7 @@ const classes = [Classes.CARD, Classes.ELEVATION_4, "mobile-menu"];
 export const MobileMenu = (props: MobileMenuProps) => {
   const isActive = props.mobileMenuOpen ? "active" : "inactive";
   const { alertCount } = props;
-  return <div>
+  return <div className={"mobile-menu-wrapper"}>
     <Overlay
       isOpen={props.mobileMenuOpen}
       onClose={props.close("mobileMenuOpen")}>
diff --git a/frontend/nav/sync_button.tsx b/frontend/nav/sync_button.tsx
index b7d56d0a7..3b3088051 100644
--- a/frontend/nav/sync_button.tsx
+++ b/frontend/nav/sync_button.tsx
@@ -46,6 +46,7 @@ export function SyncButton(props: SyncButtonProps) {
 
   return <button
     className={className}
+    title={t("sync")}
     onClick={() => dispatch(sync())}>
     {text} {spinnerEl}
   </button>;
diff --git a/frontend/password_reset/password_reset.tsx b/frontend/password_reset/password_reset.tsx
index 65c0c8bc9..fac09dcab 100644
--- a/frontend/password_reset/password_reset.tsx
+++ b/frontend/password_reset/password_reset.tsx
@@ -96,6 +96,7 @@ export class PasswordReset extends React.Component<Props, State> {
                     <Col xs={12}>
                       <button
                         className="fb-button green pull-right"
+                        title={t("Reset password")}
                         style={buttonStylesUniqueToOnlyThisPage}>
                         {t("Reset")}
                       </button>
diff --git a/frontend/read_only_mode/__tests__/read_only_icon_test.tsx b/frontend/read_only_mode/__tests__/read_only_icon_test.tsx
index bf03c2577..2833369c1 100644
--- a/frontend/read_only_mode/__tests__/read_only_icon_test.tsx
+++ b/frontend/read_only_mode/__tests__/read_only_icon_test.tsx
@@ -4,13 +4,13 @@ import { shallow } from "enzyme";
 
 describe("<ReadOnlyIcon/>", () => {
   it("shows nothing when unlocked", () => {
-    expect(ReadOnlyIcon({ locked: false }))
-      .toEqual(<div />);
+    const result = shallow(<ReadOnlyIcon locked={false} />);
+    expect(result.html())
+      .toEqual("<div class=\"read-only-mode-disabled\"></div>");
   });
 
   it("hows the pencil icon when locked", () => {
     const result = shallow(<ReadOnlyIcon locked={true} />);
-
     expect(result.find(".fa-pencil").length).toBe(1);
     expect(result.find(".fa-ban").length).toBe(1);
   });
diff --git a/frontend/read_only_mode/index.tsx b/frontend/read_only_mode/index.tsx
index 1166ded2b..0a8f86ef5 100644
--- a/frontend/read_only_mode/index.tsx
+++ b/frontend/read_only_mode/index.tsx
@@ -26,6 +26,6 @@ export const ReadOnlyIcon = (p: { locked: boolean }) => {
       <i className="fa fa-ban fa-stack-2x fa-rotate-90 text-danger" />
     </div>;
   } else {
-    return <div />;
+    return <div className={"read-only-mode-disabled"} />;
   }
 };
diff --git a/frontend/regimens/__tests__/set_active_regimen_by_name_test.ts b/frontend/regimens/__tests__/set_active_regimen_by_name_test.ts
index c67deef82..f3aa6c01e 100644
--- a/frontend/regimens/__tests__/set_active_regimen_by_name_test.ts
+++ b/frontend/regimens/__tests__/set_active_regimen_by_name_test.ts
@@ -44,8 +44,8 @@ describe("setActiveRegimenByName", () => {
 
   it("sometimes can't find a regimen by name", () => {
     const body = mockData.fakeRegimens[0].body;
-    const name = "a different value than " + body.name;
-    mockData.lastUrlChunk = name;
+    const regimenName = "a different value than " + body.name;
+    mockData.lastUrlChunk = regimenName;
     setActiveRegimenByName();
     expect(selectAllRegimens).toHaveBeenCalled();
     expect(selectRegimen).not.toHaveBeenCalled();
diff --git a/frontend/regimens/bulk_scheduler/__tests__/add_button_test.tsx b/frontend/regimens/bulk_scheduler/__tests__/add_button_test.tsx
index 4db60fb48..ac6f7f59d 100644
--- a/frontend/regimens/bulk_scheduler/__tests__/add_button_test.tsx
+++ b/frontend/regimens/bulk_scheduler/__tests__/add_button_test.tsx
@@ -19,6 +19,6 @@ describe("<AddButton />", () => {
   it("renders a <div> when inactive", () => {
     const props: AddButtonProps = { active: false, onClick: jest.fn() };
     const wrapper = mount(<AddButton {...props} />);
-    expect(wrapper.html()).toEqual("<div></div>");
+    expect(wrapper.html()).toEqual("<div class=\"no-add-button\"></div>");
   });
 });
diff --git a/frontend/regimens/bulk_scheduler/add_button.tsx b/frontend/regimens/bulk_scheduler/add_button.tsx
index eaa64c4bc..2ad659024 100644
--- a/frontend/regimens/bulk_scheduler/add_button.tsx
+++ b/frontend/regimens/bulk_scheduler/add_button.tsx
@@ -1,10 +1,12 @@
 import * as React from "react";
 import { AddButtonProps } from "./interfaces";
+import { t } from "../../i18next_wrapper";
 
 export function AddButton({ active, onClick: click }: AddButtonProps) {
-  if (!active) { return <div />; }
+  if (!active) { return <div className={"no-add-button"} />; }
   return <button
     className="fb-button green add"
+    title={t("add")}
     onClick={click}>
     <i className="fa fa-plus" />
   </button>;
diff --git a/frontend/regimens/bulk_scheduler/index.tsx b/frontend/regimens/bulk_scheduler/index.tsx
index 4faa4a630..975f7957f 100644
--- a/frontend/regimens/bulk_scheduler/index.tsx
+++ b/frontend/regimens/bulk_scheduler/index.tsx
@@ -41,7 +41,7 @@ export class BulkScheduler extends React.Component<BulkEditorProps, {}> {
 
   SequenceSelectBox = () =>
     <Col xs={6}>
-      <div>
+      <div className={"sequence-select-box"}>
         <label>{t("Sequence")}</label>
         <FBSelect onChange={this.onChange}
           selectedItem={this.selected()}
@@ -51,7 +51,7 @@ export class BulkScheduler extends React.Component<BulkEditorProps, {}> {
 
   TimeSelection = () =>
     <Col xs={6}>
-      <div>
+      <div className={"time-selection"}>
         <label>{t("Time")}</label>
         <i className="fa fa-clock-o" onClick={() =>
           this.props.dispatch(setTimeOffset(timeToMs(
diff --git a/frontend/regimens/bulk_scheduler/week_grid.tsx b/frontend/regimens/bulk_scheduler/week_grid.tsx
index 0895f74ec..5b03bacbb 100644
--- a/frontend/regimens/bulk_scheduler/week_grid.tsx
+++ b/frontend/regimens/bulk_scheduler/week_grid.tsx
@@ -6,7 +6,7 @@ import { Row, Col } from "../../ui/index";
 import { t } from "../../i18next_wrapper";
 
 export function WeekGrid({ weeks, dispatch }: WeekGridProps) {
-  return <div>
+  return <div className={"week-grid"}>
     <Row>
       <Col xs={12}>
         <label className="regimen-days-label">
@@ -21,26 +21,30 @@ export function WeekGrid({ weeks, dispatch }: WeekGridProps) {
     <Row>
       <Col xs={12}>
         <div className="week-grid-meta-buttons">
-          <div>
+          <div className={"weed-grid-plus-minus-buttons"}>
             <button
               className="green widget-control fb-button"
+              title={t("add week")}
               onClick={() => dispatch(pushWeek())}>
               <i className="fa fa-plus" /> {t("Week")}
             </button>
             <button
               className="red widget-control fb-button"
+              title={t("remove week")}
               onClick={() => dispatch(popWeek())}>
               <i className="fa fa-minus" /> {t("Week")}
             </button>
           </div>
-          <div>
+          <div className={"weed-grid-bulk-select-buttons"}>
             <button
               className="gray widget-control fb-button"
+              title={t("deselect all days")}
               onClick={() => dispatch(deselectDays())}>
               {t("Deselect all")}
             </button>
             <button
               className="gray widget-control fb-button"
+              title={t("select all days")}
               onClick={() => dispatch(selectDays())}>
               {t("Select all")}
             </button>
diff --git a/frontend/regimens/bulk_scheduler/week_row.tsx b/frontend/regimens/bulk_scheduler/week_row.tsx
index 12ecf4d1a..9653e250d 100644
--- a/frontend/regimens/bulk_scheduler/week_row.tsx
+++ b/frontend/regimens/bulk_scheduler/week_row.tsx
@@ -28,6 +28,7 @@ function Day({ day, id, dispatch, week, active }: DayProps) {
     <input type="checkbox"
       id={id}
       className="day"
+      name="day"
       onClick={select(dispatch, day, week)}
       checked={active}
       readOnly={true} />
diff --git a/frontend/regimens/editor/active_editor.tsx b/frontend/regimens/editor/active_editor.tsx
index 3aa792735..889874a49 100644
--- a/frontend/regimens/editor/active_editor.tsx
+++ b/frontend/regimens/editor/active_editor.tsx
@@ -76,6 +76,7 @@ export class ActiveEditor
 
 export const OpenSchedulerButton = (props: { dispatch: Function }) =>
   <button className="open-bulk-scheduler-btn fb-button gray"
+    title={t("open scheduler panel")}
     onClick={() => props.dispatch({
       type: Actions.SET_SCHEDULER_STATE, payload: true
     })}>
@@ -97,6 +98,7 @@ const RegimenButtonGroup = (props: RegimenProps) =>
       onClick={() => props.dispatch(save(props.regimen.uuid))} />
     <CopyButton regimen={props.regimen} dispatch={props.dispatch} />
     <button className="fb-button red"
+      title={t("delete regimen")}
       onClick={() => props.dispatch(destroy(props.regimen.uuid))
         .then(() => push("/app/regimens/"))}>
       {t("Delete")}
diff --git a/frontend/regimens/editor/copy_button.tsx b/frontend/regimens/editor/copy_button.tsx
index 6ffff2c79..f0d51d47d 100644
--- a/frontend/regimens/editor/copy_button.tsx
+++ b/frontend/regimens/editor/copy_button.tsx
@@ -10,6 +10,7 @@ import { t } from "../../i18next_wrapper";
 export const CopyButton = ({ dispatch, regimen }: CopyButtonProps) =>
   <button
     className="fb-button yellow"
+    title={t("copy")}
     onClick={() => dispatch(copyRegimen(regimen))}>
     {t("Copy")}
   </button>;
diff --git a/frontend/regimens/editor/regimen_name_input.tsx b/frontend/regimens/editor/regimen_name_input.tsx
index 598fc739f..1fbd6d294 100644
--- a/frontend/regimens/editor/regimen_name_input.tsx
+++ b/frontend/regimens/editor/regimen_name_input.tsx
@@ -16,6 +16,7 @@ export function RegimenNameInput({ regimen, dispatch }: RegimenProps) {
       <input
         placeholder={t("Regimen Name")}
         type="text"
+        name="name"
         onChange={write({ dispatch, regimen })}
         value={value} />
     </Col>
diff --git a/frontend/regimens/list/add_button.tsx b/frontend/regimens/list/add_button.tsx
index 9214ce38c..af848745d 100644
--- a/frontend/regimens/list/add_button.tsx
+++ b/frontend/regimens/list/add_button.tsx
@@ -20,6 +20,7 @@ export function AddRegimen(props: AddRegimenProps) {
   const { dispatch, length } = props;
   return <button
     className={classes}
+    title={t("add new regimen")}
     onClick={() => {
       const newRegimen = emptyRegimenBody(length);
       dispatch(init("Regimen", newRegimen));
diff --git a/frontend/regimens/list/index.tsx b/frontend/regimens/list/index.tsx
index a0b991427..64c20998b 100644
--- a/frontend/regimens/list/index.tsx
+++ b/frontend/regimens/list/index.tsx
@@ -19,7 +19,7 @@ const RegimenListHeader = (props: RegimenListHeaderProps) =>
     <div className="thin-search-wrapper">
       <div className="text-input-wrapper">
         <i className="fa fa-search" />
-        <input
+        <input name="searchTerm"
           onChange={props.onChange}
           placeholder={t("Search regimens...")} />
       </div>
@@ -60,7 +60,7 @@ export class RegimensList extends
   }
 
   render() {
-    return <div>
+    return <div className={"regimens-list-wrapper"}>
       <RegimenListHeader
         dispatch={this.props.dispatch}
         regimenCount={this.props.regimens.length}
diff --git a/frontend/regimens/list/regimen_list_item.tsx b/frontend/regimens/list/regimen_list_item.tsx
index 2efd1eb1b..81a79c216 100644
--- a/frontend/regimens/list/regimen_list_item.tsx
+++ b/frontend/regimens/list/regimen_list_item.tsx
@@ -7,7 +7,7 @@ import { Link } from "../../link";
 import { t } from "../../i18next_wrapper";
 
 export function RegimenListItem({ regimen, dispatch, inUse }: RegimenListItemProps) {
-  const name = (regimen.body.name || "") + (regimen.specialStatus ? " *" : "");
+  const label = (regimen.body.name || "") + (regimen.specialStatus ? " *" : "");
   const color = regimen.body.color || "gray";
   const classNames = [`block`, `full-width`, `fb-button`, `${color}`];
   lastUrlChunk() === urlFriendly(regimen.body.name) && classNames.push("active");
@@ -16,8 +16,9 @@ export function RegimenListItem({ regimen, dispatch, inUse }: RegimenListItemPro
     key={regimen.uuid}>
     <button
       className={classNames.join(" ")}
+      title={t("open regimen")}
       onClick={() => dispatch(selectRegimen(regimen.uuid))}>
-      <label>{name}</label>
+      <label>{label}</label>
       {inUse && <i className="in-use fa fa-hdd-o" title={t(Content.IN_USE)} />}
     </button>
   </Link>;
diff --git a/frontend/regimens/set_active_regimen_by_name.ts b/frontend/regimens/set_active_regimen_by_name.ts
index bc32d4c06..75e63c84c 100644
--- a/frontend/regimens/set_active_regimen_by_name.ts
+++ b/frontend/regimens/set_active_regimen_by_name.ts
@@ -11,7 +11,7 @@ export function setActiveRegimenByName() {
   }
 
   selectAllRegimens(store.getState().resources.index).map(reg => {
-    const name = urlFriendly(reg.body.name);
-    (lastUrlChunk() === name) && setRegimen(reg.uuid);
+    const regimenName = urlFriendly(reg.body.name);
+    (lastUrlChunk() === regimenName) && setRegimen(reg.uuid);
   });
 }
diff --git a/frontend/resources/selectors.ts b/frontend/resources/selectors.ts
index 2085525ce..4cdf2388c 100644
--- a/frontend/resources/selectors.ts
+++ b/frontend/resources/selectors.ts
@@ -59,7 +59,8 @@ export const findId = (index: ResourceIndex, kind: ResourceName, id: number): UU
   }
 };
 
-export const isKind = (name: ResourceName) => (tr: TaggedResource) => tr.kind === name;
+export const isKind = (resourceName: ResourceName) => (tr: TaggedResource) =>
+  tr.kind === resourceName;
 
 export function groupPointsByType(index: ResourceIndex) {
   return chain(selectAllActivePoints(index))
diff --git a/frontend/resources/selectors_by_id.ts b/frontend/resources/selectors_by_id.ts
index dc00eb0fe..2f42a1d49 100644
--- a/frontend/resources/selectors_by_id.ts
+++ b/frontend/resources/selectors_by_id.ts
@@ -32,10 +32,10 @@ export const findAllById =
   };
 
 export const byId =
-  <T extends TaggedResource>(name: T["kind"]) =>
+  <T extends TaggedResource>(kind: T["kind"]) =>
     (index: ResourceIndex, id: number): T | undefined => {
-      const resources = findAll(index, name);
-      const f = (x: TaggedResource) => (x.kind === name) && (x.body.id === id);
+      const resources = findAll(index, kind);
+      const f = (x: TaggedResource) => (x.kind === kind) && (x.body.id === id);
       // Maybe we should add a throw here?
       return resources.filter(f)[0] as T | undefined;
     };
diff --git a/frontend/sequences/__tests__/set_active_sequence_by_name_test.ts b/frontend/sequences/__tests__/set_active_sequence_by_name_test.ts
index 8c14df61c..cd51f0f86 100644
--- a/frontend/sequences/__tests__/set_active_sequence_by_name_test.ts
+++ b/frontend/sequences/__tests__/set_active_sequence_by_name_test.ts
@@ -38,8 +38,8 @@ describe("setActiveSequenceByName", () => {
 
   it("sometimes can't find a sequence by name", () => {
     const body = mockData.fakeSequences[0].body;
-    const name = "a different value than " + body.name;
-    mockData.lastUrlChunk = name;
+    const sequenceName = "a different value than " + body.name;
+    mockData.lastUrlChunk = sequenceName;
     setActiveSequenceByName();
     expect(selectAllSequences).toHaveBeenCalled();
     expect(selectSequence).not.toHaveBeenCalled();
diff --git a/frontend/sequences/inputs/input_unknown.tsx b/frontend/sequences/inputs/input_unknown.tsx
index a8524e5df..af4da5fec 100644
--- a/frontend/sequences/inputs/input_unknown.tsx
+++ b/frontend/sequences/inputs/input_unknown.tsx
@@ -2,6 +2,6 @@ import * as React from "react";
 import { StepInputProps } from "../interfaces";
 
 export function InputUnknown({ field }: StepInputProps) {
-  return <input type="text"
+  return <input type="text" name="unknown"
     placeholder={`UNEXPECTED INPUT '${(field || "empty").toString()}'`} />;
 }
diff --git a/frontend/sequences/locals_list/default_value_form.tsx b/frontend/sequences/locals_list/default_value_form.tsx
index 5088e9ea2..6b9f03f18 100644
--- a/frontend/sequences/locals_list/default_value_form.tsx
+++ b/frontend/sequences/locals_list/default_value_form.tsx
@@ -40,7 +40,7 @@ export const DefaultValueForm = (props: DefaultValueFormProps) => {
         customFilterRule={NO_GROUPS} />
     </div>;
   } else {
-    return <div />;
+    return <div className={"no-default-value-form"} />;
   }
 };
 
diff --git a/frontend/sequences/locals_list/location_form_coordinate_input_boxes.tsx b/frontend/sequences/locals_list/location_form_coordinate_input_boxes.tsx
index cd5297533..e0d2336aa 100644
--- a/frontend/sequences/locals_list/location_form_coordinate_input_boxes.tsx
+++ b/frontend/sequences/locals_list/location_form_coordinate_input_boxes.tsx
@@ -51,5 +51,5 @@ export const CoordinateInputBoxes = (props: CoordinateInputBoxesProps) => {
             value={"" + vector[axis]} />
         </Col>)}
     </Row>
-    : <div />;
+    : <div className={"no-location-coordinate-input-boxes"} />;
 };
diff --git a/frontend/sequences/locals_list/location_form_list.ts b/frontend/sequences/locals_list/location_form_list.ts
index 4d93c95e8..30c1399d8 100644
--- a/frontend/sequences/locals_list/location_form_list.ts
+++ b/frontend/sequences/locals_list/location_form_list.ts
@@ -44,11 +44,11 @@ export const NAME_MAP: Record<DropdownHeadingId, string> = {
   "Other": "Other",
 };
 
-const heading = (name: DropdownHeadingId): DropDownItem[] => ([{
-  label: t(NAME_MAP[name]),
+const heading = (headingId: DropdownHeadingId): DropDownItem[] => ([{
+  label: t(NAME_MAP[headingId]),
   heading: true,
   value: 0,
-  headingId: name
+  headingId: headingId
 }]);
 
 const points2ddi = (allPoints: TaggedPoint[], pointerType: PointerTypeName) =>
diff --git a/frontend/sequences/sequence_editor_middle_active.tsx b/frontend/sequences/sequence_editor_middle_active.tsx
index 0f1436d79..882561c84 100644
--- a/frontend/sequences/sequence_editor_middle_active.tsx
+++ b/frontend/sequences/sequence_editor_middle_active.tsx
@@ -145,6 +145,7 @@ const SequenceBtnGroup = ({
       dispatch={dispatch} />
     <button
       className="fb-button red"
+      title={t("delete sequence")}
       onClick={() => {
         const confirm = getWebAppConfigValue(
           BooleanSetting.confirm_sequence_deletion);
@@ -156,6 +157,7 @@ const SequenceBtnGroup = ({
     </button>
     <button
       className="fb-button yellow"
+      title={t("copy sequence")}
       onClick={() => dispatch(copySequence(sequence))}>
       {t("Copy")}
     </button>
@@ -295,6 +297,7 @@ export const AddCommandButton = (props: { dispatch: Function, index: number }) =
   <div className="add-command-button-container">
     <button
       className="add-command fb-button gray"
+      title={t("add sequence step")}
       onClick={() => props.dispatch({
         type: Actions.SET_SEQUENCE_STEP_POSITION,
         payload: props.index,
diff --git a/frontend/sequences/set_active_sequence_by_name.ts b/frontend/sequences/set_active_sequence_by_name.ts
index 3a200ad63..88705fb1d 100644
--- a/frontend/sequences/set_active_sequence_by_name.ts
+++ b/frontend/sequences/set_active_sequence_by_name.ts
@@ -13,7 +13,7 @@ export function setActiveSequenceByName() {
   }
 
   selectAllSequences(store.getState().resources.index).map(seq => {
-    const name = urlFriendly(seq.body.name);
-    (lastUrlChunk() === name) && setSequence(seq.uuid);
+    const sequenceName = urlFriendly(seq.body.name);
+    (lastUrlChunk() === sequenceName) && setSequence(seq.uuid);
   });
 }
diff --git a/frontend/sequences/step_button_cluster.tsx b/frontend/sequences/step_button_cluster.tsx
index 5a9bdc789..966178b61 100644
--- a/frontend/sequences/step_button_cluster.tsx
+++ b/frontend/sequences/step_button_cluster.tsx
@@ -194,14 +194,12 @@ export function StepButtonCluster(props: StepButtonProps) {
     {t("Mark As...")}
   </StepButton>
   );
-  return <div>
-    <Row>
-      <div className="step-button-cluster">
-        {ALL_THE_BUTTONS.map((stepButton, inx) =>
-          <div key={inx} onClick={() => scrollToBottom("sequenceDiv")}>
-            {stepButton}
-          </div>)}
-      </div>
-    </Row>
-  </div>;
+  return <Row>
+    <div className="step-button-cluster">
+      {ALL_THE_BUTTONS.map((stepButton, inx) =>
+        <div key={inx} onClick={() => scrollToBottom("sequenceDiv")}>
+          {stepButton}
+        </div>)}
+    </div>
+  </Row>;
 }
diff --git a/frontend/sequences/step_buttons.tsx b/frontend/sequences/step_buttons.tsx
index 517a3b6c9..78d661d02 100644
--- a/frontend/sequences/step_buttons.tsx
+++ b/frontend/sequences/step_buttons.tsx
@@ -30,6 +30,7 @@ export function StepButton({ children, step, color, dispatch, current, index }:
         draggerId={NULL_DRAGGER_ID}>
         <button draggable={true}
           className={`fb-button full-width block step-block ${color}`}
+          title={t("add step")}
           onClick={stepClick(dispatch, step, current, index)}>
           <div className="step-block-drag">
             {children}
diff --git a/frontend/sequences/step_tiles/mark_as/unpack_step.ts b/frontend/sequences/step_tiles/mark_as/unpack_step.ts
index b4d5f7da8..feb3252eb 100644
--- a/frontend/sequences/step_tiles/mark_as/unpack_step.ts
+++ b/frontend/sequences/step_tiles/mark_as/unpack_step.ts
@@ -22,8 +22,8 @@ export const DISMOUNTED = (): DropDownPair => ({
 const DEFAULT_TOOL_NAME = "Untitled Tool";
 const REMOVED_ACTION = { label: "Removed", value: "removed" };
 
-const mountedTo = (name = DEFAULT_TOOL_NAME): DropDownItem =>
-  ({ label: `${MOUNTED_TO} ${name}`, value: "mounted" });
+const mountedTo = (toolName = DEFAULT_TOOL_NAME): DropDownItem =>
+  ({ label: `${MOUNTED_TO} ${toolName}`, value: "mounted" });
 
 /** The user wants to change the `mounted_tool_id` of their Device. */
 function mountTool(i: StepWithResourceIndex): DropDownPair {
diff --git a/frontend/sequences/step_tiles/tile_assertion/lua_part.tsx b/frontend/sequences/step_tiles/tile_assertion/lua_part.tsx
index 1702cb51d..5eec12a5a 100644
--- a/frontend/sequences/step_tiles/tile_assertion/lua_part.tsx
+++ b/frontend/sequences/step_tiles/tile_assertion/lua_part.tsx
@@ -15,7 +15,7 @@ export function LuaPart(props: AssertionStepProps) {
     }));
   };
   const { lua } = props.currentStep.args;
-  return <div>
+  return <div className={"lua"}>
     <textarea
       value={lua}
       onChange={luaChange}
diff --git a/frontend/sequences/step_tiles/tile_execute_script.tsx b/frontend/sequences/step_tiles/tile_execute_script.tsx
index 27a6187bd..f35f69323 100644
--- a/frontend/sequences/step_tiles/tile_execute_script.tsx
+++ b/frontend/sequences/step_tiles/tile_execute_script.tsx
@@ -18,15 +18,15 @@ export function TileExecuteScript(props: StepParams) {
     const farmwareName = currentStep.args.label;
 
     /** Selected Farmware is installed on connected bot. */
-    const isInstalled = (name: string): boolean => {
-      return !!(farmwareData && farmwareData.farmwareNames.includes(name));
+    const isInstalled = (n: string): boolean => {
+      return !!(farmwareData && farmwareData.farmwareNames.includes(n));
     };
 
-    const selectedFarmwareDDI = (name: string): DropDownItem => {
-      if (isInstalled(name)) {
-        return name === "plant-detection"
-          ? { value: name, label: t("Weed Detector") }
-          : { value: name, label: name };
+    const selectedFarmwareDDI = (n: string): DropDownItem => {
+      if (isInstalled(n)) {
+        return n === "plant-detection"
+          ? { value: n, label: t("Weed Detector") }
+          : { value: n, label: n };
       }
       return { label: t("Manual Input"), value: "" };
     };
diff --git a/frontend/sequences/step_tiles/tile_execute_script_support.tsx b/frontend/sequences/step_tiles/tile_execute_script_support.tsx
index 17e753d8d..77e30577b 100644
--- a/frontend/sequences/step_tiles/tile_execute_script_support.tsx
+++ b/frontend/sequences/step_tiles/tile_execute_script_support.tsx
@@ -8,9 +8,9 @@ import { ToolTips } from "../../constants";
 import { t } from "../../i18next_wrapper";
 
 /** Create a Farmware input pair to include in the step body. */
-const createPair = (name: string, label: string, value: string): Pair => ({
+const createPair = (envName: string, label: string, value: string): Pair => ({
   kind: "pair",
-  args: { label: name, value },
+  args: { label: envName, value },
   comment: label
 });
 
@@ -24,9 +24,9 @@ const executorAdd = (inputPair: Pair) => (s: ExecuteScript) => {
 const executorAddAll = (fwName: string, configs: FarmwareConfig[]) =>
   (s: ExecuteScript) => {
     configs.map(config => {
-      const name = getConfigEnvName(fwName, config.name);
-      if (!hasPair(s, name)) {
-        const pair = createPair(name, config.label, config.value);
+      const envName = getConfigEnvName(fwName, config.name);
+      if (!hasPair(s, envName)) {
+        const pair = createPair(envName, config.label, config.value);
         s.body = s.body || [];
         s.body.push(pair);
       }
@@ -57,10 +57,10 @@ const executorRemoveAll = (s: ExecuteScript) => {
 };
 
 /** Check if the current step already has a Farmware input. */
-const hasPair = (step: ExecuteScript, name: string): Boolean => {
+const hasPair = (step: ExecuteScript, envName: string): Boolean => {
   // A list of Farmware input pair names in the current step.
   const inputNames: string[] = (step.body || []).map(x => x.args.label);
-  return inputNames.includes(name);
+  return inputNames.includes(envName);
 };
 
 /** Replace the Farmware input pair if it exists, otherwise add it. */
@@ -121,7 +121,7 @@ export const farmwareList =
       return farmwareNames
         .filter(x => (firstPartyFarmwareNames && !showFirstPartyFarmware)
           ? !firstPartyFarmwareNames.includes(x) : x)
-        .map(name => ({ value: name, label: name }))
+        .map(farmwareName => ({ value: farmwareName, label: farmwareName }))
         .concat({ label: t("Weed Detector"), value: "plant-detection" });
     }
     return [];
@@ -171,18 +171,18 @@ export function FarmwareInputs(props: FarmwareInputsProps) {
   };
 
   /** Change a Farmware input pair value. */
-  const changePairValue = (name: string, label: string) =>
+  const changePairValue = (envName: string, label: string) =>
     (e: React.SyntheticEvent<HTMLInputElement>) => {
       const value = e.currentTarget.value;
-      const pair = createPair(name, label, value);
+      const pair = createPair(envName, label, value);
       addOrUpdatePair(pair, currentStep, updateStep);
     };
 
   /** Reset Farmware input pair value to the default value. */
-  const resetPairValue = (name: string, label: string) =>
+  const resetPairValue = (envName: string, label: string) =>
     () => {
-      const value = defaultValues()[name];
-      const pair = createPair(name, label, value);
+      const value = defaultValues()[envName];
+      const pair = createPair(envName, label, value);
       addOrUpdatePair(pair, currentStep, updateStep);
     };
 
@@ -197,8 +197,8 @@ export function FarmwareInputs(props: FarmwareInputsProps) {
   };
 
   /** Check if a value is the default input value. */
-  const isDefault = (name: string, value: string): Boolean =>
-    defaultValues()[name] === value;
+  const isDefault = (envName: string, value: string): Boolean =>
+    defaultValues()[envName] === value;
 
   /** All requested inputs (namespaced, only if connected to bot). */
   const configEnvNames = currentFarmwareInputs(farmwareName, defaultConfigs);
@@ -219,25 +219,25 @@ export function FarmwareInputs(props: FarmwareInputsProps) {
     <div className="farmware-step-input-fields">
       <div className="checkbox-row">
         <div className={`fb-checkbox ${partial}`}>
-          <input type="checkbox"
+          <input type="checkbox" name="parameters"
             checked={areAllPresent}
             onChange={areAllPresent ? removeAllPairs : addAllDefaultPairs} />
         </div>
         <label>{t("Parameters")}</label>
         <Help text={ToolTips.FARMWARE_CONFIGS} />
       </div>
-      {farmwareInputEntries.map(([name, config], i) => {
-        const pair = createPair(name, config.label, config.value);
+      {farmwareInputEntries.map(([envName, config], i) => {
+        const pair = createPair(envName, config.label, config.value);
         const outdated = farmwareInstalled &&
-          !isCurrentFarmwareInput(configEnvNames, name);
-        return <fieldset key={i + name}
+          !isCurrentFarmwareInput(configEnvNames, envName);
+        return <fieldset key={i + envName}
           title={outdated ? t("Input is not needed for this Farmware.") : ""}>
           <div className="checkbox-row">
             <div className="fb-checkbox">
-              <input type="checkbox"
-                checked={inputsInBody.includes(name)}
-                onChange={inputsInBody.includes(name)
-                  ? removeStepPair(name)
+              <input type="checkbox" name="parameter"
+                checked={inputsInBody.includes(envName)}
+                onChange={inputsInBody.includes(envName)
+                  ? removeStepPair(envName)
                   : addStepPair(pair)} />
             </div>
             <label style={outdated ? { color: "gray" } : {}}>
@@ -245,16 +245,16 @@ export function FarmwareInputs(props: FarmwareInputsProps) {
             </label>
           </div>
           <div className="farmware-input-group">
-            {inputsInBody.includes(name) &&
+            {inputsInBody.includes(envName) &&
               <BlurableInput
                 value={config.value}
-                onCommit={changePairValue(name, config.label)}
+                onCommit={changePairValue(envName, config.label)}
                 disabled={outdated} />}
-            {!isDefault(name, config.value) &&
+            {!isDefault(envName, config.value) &&
               <i className="fa fa-times-circle"
-                onClick={resetPairValue(name, config.label)} />}
+                onClick={resetPairValue(envName, config.label)} />}
           </div>
         </fieldset>;
       })}
-    </div> : <div />;
+    </div> : <div className={"no-farmware-inputs"} />;
 }
diff --git a/frontend/sequences/step_tiles/tile_move_absolute_conflict_check.tsx b/frontend/sequences/step_tiles/tile_move_absolute_conflict_check.tsx
index 93371928e..822f4b04e 100644
--- a/frontend/sequences/step_tiles/tile_move_absolute_conflict_check.tsx
+++ b/frontend/sequences/step_tiles/tile_move_absolute_conflict_check.tsx
@@ -76,5 +76,5 @@ export const MoveAbsoluteWarning =
       ? <StepWarning
         warning={settingConflictWarning()}
         conflicts={settingConflicts()} />
-      : <div />;
+      : <div className={"no-step-warning"} />;
   };
diff --git a/frontend/sequences/step_tiles/tile_send_message.tsx b/frontend/sequences/step_tiles/tile_send_message.tsx
index e065c3be9..c928456f5 100644
--- a/frontend/sequences/step_tiles/tile_send_message.tsx
+++ b/frontend/sequences/step_tiles/tile_send_message.tsx
@@ -48,17 +48,17 @@ export class RefactoredSendMessage
     return (this.props.currentStep.body || []).map(x => x.args.channel_name);
   }
 
-  hasChannel = (name: ChannelName) => {
-    return this.channels.includes(name);
+  hasChannel = (channelName: ChannelName) => {
+    return this.channels.includes(channelName);
   }
 
-  add = (name: ChannelName) => (s: SendMessage) => {
+  add = (channelName: ChannelName) => (s: SendMessage) => {
     s.body = s.body || [];
-    s.body.push(channel(name));
+    s.body.push(channel(channelName));
   }
 
-  remove = (name: ChannelName) => (s: SendMessage) => {
-    s.body = (s.body || []).filter(x => x.args.channel_name !== name);
+  remove = (channelName: ChannelName) => (s: SendMessage) => {
+    s.body = (s.body || []).filter(x => x.args.channel_name !== channelName);
   }
 
   toggle = (n: ChannelName) => () => {
@@ -119,12 +119,12 @@ export class RefactoredSendMessage
                   list={MESSAGE_STATUSES} />
               </div>
               <div className="channel-fields">
-                <div>{EACH_CHANNEL.map((chan, inx) => {
+                {EACH_CHANNEL.map((chan, inx) => {
                   return <fieldset key={inx}>
                     <label htmlFor={chan.name}>
                       {chan.label}
                     </label>
-                    <input type="checkbox"
+                    <input type="checkbox" name={chan.name}
                       id={chan.name}
                       onChange={this.toggle(chan.name)}
                       checked={
@@ -132,7 +132,6 @@ export class RefactoredSendMessage
                       disabled={chan.alwaysOn} />
                   </fieldset>;
                 })}
-                </div>
               </div>
             </div>
           </Col>
diff --git a/frontend/sequences/step_ui/step_radio.tsx b/frontend/sequences/step_ui/step_radio.tsx
index 1363d4b3e..62b3c246b 100644
--- a/frontend/sequences/step_ui/step_radio.tsx
+++ b/frontend/sequences/step_ui/step_radio.tsx
@@ -22,7 +22,7 @@ export const StepRadio = <T extends string>(props: StepRadioProps<T>) =>
             {props.choices.map((choice, i) =>
               <div key={i} style={{ display: "inline" }}>
                 <label>
-                  <input type="radio"
+                  <input type="radio" name={choice}
                     value={choice}
                     onChange={() => props.onChange(choice)}
                     checked={props.currentChoice === choice} />
diff --git a/frontend/sequences/step_ui/step_warning.tsx b/frontend/sequences/step_ui/step_warning.tsx
index a93a2f430..fec9348d1 100644
--- a/frontend/sequences/step_ui/step_warning.tsx
+++ b/frontend/sequences/step_ui/step_warning.tsx
@@ -32,7 +32,7 @@ export function StepWarning(props: StepWarningProps) {
       interactionKind={PopoverInteractionKind.HOVER}
       popoverClassName={"help"}>
       <i className="fa fa-exclamation-triangle" />
-      <div>
+      <div className={"step-warning-text"}>
         {warning}
       </div>
     </Popover>
diff --git a/frontend/sequences/test_button.tsx b/frontend/sequences/test_button.tsx
index 59d1f491d..9214b619d 100644
--- a/frontend/sequences/test_button.tsx
+++ b/frontend/sequences/test_button.tsx
@@ -85,10 +85,14 @@ interface TestProps {
 /** Sequence test button. Turns grey when sequence is not saved and synced. */
 const Test = (props: TestProps) => {
   const normalColor = props.canTest ? "orange" : "pseudo-disabled";
+  const buttonText = props.menuOpen
+    ? t("Close")
+    : t("Test");
   return <button
     className={`fb-button ${props.menuOpen ? "gray" : normalColor}`}
+    title={buttonText}
     onClick={props.onClick}>
-    {props.menuOpen ? t("Close") : t("Test")}
+    {buttonText}
   </button>;
 };
 
diff --git a/frontend/session.ts b/frontend/session.ts
index 8f1b09bd6..8dcaf5e03 100644
--- a/frontend/session.ts
+++ b/frontend/session.ts
@@ -49,21 +49,21 @@ export namespace Session {
 export const isBooleanSetting =
   (k: unknown): k is BooleanConfigKey => !!BooleanSetting[k as BooleanConfigKey];
 
-export function safeBooleanSetting(name: string): BooleanConfigKey {
-  if (isBooleanSetting(name)) {
-    return name;
+export function safeBooleanSetting(settingName: string): BooleanConfigKey {
+  if (isBooleanSetting(settingName)) {
+    return settingName;
   } else {
-    throw new Error(`Expected BooleanConfigKey but got '${name}'`);
+    throw new Error(`Expected BooleanConfigKey but got '${settingName}'`);
   }
 }
 
 export const isNumericSetting =
   (x: unknown): x is NumberConfigKey => !!NumericSetting[x as NumberConfigKey];
 
-export function safeNumericSetting(name: string): NumberConfigKey {
-  if (isNumericSetting(name)) {
-    return name;
+export function safeNumericSetting(settingName: string): NumberConfigKey {
+  if (isNumericSetting(settingName)) {
+    return settingName;
   } else {
-    throw new Error(`Expected NumberConfigKey but got '${name}'`);
+    throw new Error(`Expected NumberConfigKey but got '${settingName}'`);
   }
 }
diff --git a/frontend/tos_update/component.tsx b/frontend/tos_update/component.tsx
index 92d9a9336..42b2179a9 100644
--- a/frontend/tos_update/component.tsx
+++ b/frontend/tos_update/component.tsx
@@ -24,9 +24,9 @@ export class TosUpdate extends React.Component<Props, Partial<State>> {
     this.state = { agree_to_terms: false };
   }
 
-  set = (name: keyof State) => (event: React.FormEvent<HTMLInputElement>) => {
-    const state: { [name: string]: State[keyof State] } = {};
-    state[name] = (event.currentTarget).value;
+  set = (key: keyof State) => (event: React.FormEvent<HTMLInputElement>) => {
+    const state: { [key: string]: State[keyof State] } = {};
+    state[key] = (event.currentTarget).value;
     this.setState(state);
   };
 
@@ -54,7 +54,7 @@ export class TosUpdate extends React.Component<Props, Partial<State>> {
       return <form onSubmit={this.submit}>
         <div className="input-group">
           <label> {t("Email")} </label>
-          <input type="email"
+          <input type="email" name="email"
             onChange={this.set("email").bind(this)}>
           </input>
           <label>{t("Password")}</label>
@@ -71,6 +71,7 @@ export class TosUpdate extends React.Component<Props, Partial<State>> {
             <Col xs={12}>
               <button
                 className="green fb-button"
+                title={t("agree")}
                 onClick={() =>
                   !agree && logError(t("Please agree to the terms."))}
                 type={agree ? "submit" : "button"}>
@@ -81,7 +82,7 @@ export class TosUpdate extends React.Component<Props, Partial<State>> {
         </div>
       </form>;
     } else {
-      return <div>
+      return <div className={"something-went-wrong"}>
         <p>
           {t("Something went wrong while rendering this page.")}
         </p>
diff --git a/frontend/ui/back_arrow.tsx b/frontend/ui/back_arrow.tsx
index b386d1934..f43a200d9 100644
--- a/frontend/ui/back_arrow.tsx
+++ b/frontend/ui/back_arrow.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { t } from "../i18next_wrapper";
 
 interface BackArrowProps {
   onClick?(): void;
@@ -9,7 +10,7 @@ export function BackArrow(props: BackArrowProps) {
     props.onClick?.();
   };
 
-  return <a onClick={onClick} className="back-arrow">
+  return <a onClick={onClick} title={t("go back")} className="back-arrow">
     <i className="fa fa-arrow-left" />
   </a>;
 }
diff --git a/frontend/ui/color_picker.tsx b/frontend/ui/color_picker.tsx
index a47f78f9c..f6f8cd05b 100644
--- a/frontend/ui/color_picker.tsx
+++ b/frontend/ui/color_picker.tsx
@@ -3,6 +3,7 @@ import { Popover, Position } from "@blueprintjs/core";
 import { Saucer } from "../ui/index";
 import { ResourceColor } from "../interfaces";
 import { colors } from "../util";
+import { t } from "../i18next_wrapper";
 
 export interface ColorPickerProps {
   position?: Position;
@@ -23,6 +24,7 @@ interface ColorPickerItemProps extends ColorPickerClusterProps {
 
 const ColorPickerItem = (props: ColorPickerItemProps) => {
   return <div className="color-picker-item-wrapper"
+    title={t(props.color)}
     onClick={() => props.onChange(props.color)}>
     {props.saucerIcon
       ? <i className={`icon-saucer fa ${props.saucerIcon} ${props.color}`} />
diff --git a/frontend/ui/empty_state_wrapper.tsx b/frontend/ui/empty_state_wrapper.tsx
index 2165c3713..823ab74ba 100644
--- a/frontend/ui/empty_state_wrapper.tsx
+++ b/frontend/ui/empty_state_wrapper.tsx
@@ -40,7 +40,7 @@ export const EmptyStateWrapper = (props: EmptyStateWrapperProps) =>
         src={`/app-resources/img/empty_state/${props.graphic}.png`} />
       {props.title &&
         <h5>{t(props.title)}</h5>}
-      {props.textElement || <div />}
+      {props.textElement || <div className={"no-empty-state-text"} />}
       {props.text &&
         <p>{t(props.text)}</p>}
     </div>;
diff --git a/frontend/ui/help.tsx b/frontend/ui/help.tsx
index 2c00d046d..68aba52fa 100644
--- a/frontend/ui/help.tsx
+++ b/frontend/ui/help.tsx
@@ -16,6 +16,6 @@ export function Help(props: HelpProps) {
       ? PopoverInteractionKind.CLICK : PopoverInteractionKind.HOVER}
     popoverClassName={"help"}>
     <i className={`fa fa-${props.customIcon || "question-circle"} help-icon`} />
-    <div>{t(props.text)}</div>
+    <div className={"help-text-content"}>{t(props.text)}</div>
   </Popover>;
 }
diff --git a/frontend/ui/input_error.tsx b/frontend/ui/input_error.tsx
index 67c91cd2b..80732bff7 100644
--- a/frontend/ui/input_error.tsx
+++ b/frontend/ui/input_error.tsx
@@ -17,4 +17,4 @@ export const InputError = (props: InputErrorProps) =>
       <i className="fa fa-exclamation-circle input-error" />
       <p>{props.error}</p>
     </Popover>
-    : <div />;
+    : <div className={"no-input-error"} />;
diff --git a/frontend/ui/save_button.tsx b/frontend/ui/save_button.tsx
index 3bcfa0d22..c60c6141c 100644
--- a/frontend/ui/save_button.tsx
+++ b/frontend/ui/save_button.tsx
@@ -37,7 +37,8 @@ export function SaveBtn(props: SaveBtnProps) {
   const spinnerEl = (props.status === SpecialStatus.SAVING) ?
     spinner : "";
 
-  return <button onClick={onClick} hidden={!!hidden} className={klass}>
+  return <button onClick={onClick} title={t("save")}
+    hidden={!!hidden} className={klass}>
     {CAPTIONS[props.status] || (savedText || t("Saved") + " ✔")} {spinnerEl}
   </button>;
 }