diff --git a/src/Tests/SimpleGmapTest.php b/src/Tests/SimpleGmapTest.php
deleted file mode 100644
index 11e9170..0000000
--- a/src/Tests/SimpleGmapTest.php
+++ /dev/null
@@ -1,196 +0,0 @@
-<?php
-
-namespace Drupal\simple_gmap\Tests;
-
-use Drupal\simpletest\WebTestBase;
-
-/**
- * Creates a page to look at to test the Simple Google Maps module.
- *
- * Run the test, scroll to the bottom, open the last page link, and check
- * what the verbose message lines say to check on that page. If you want to
- * check the static maps, be sure to edit this file and put in an API key
- * that is valid for static maps.
- *
- * @group simple_gmap
- */
-class SimpleGmapTest extends WebTestBase {
-
-  /**
-   * API key for static maps.
-   *
-   * @var string
-   */
-  protected $apiKey = 'Static maps will not work unless you put in a key';
-
-  /**
-   * Modules to enable.
-   *
-   * @var array
-   */
-  public static $modules = [
-    'simple_gmap',
-    'node',
-    'field',
-    'field_ui',
-    'text',
-    'block',
-    'user',
-  ];
-
-  /**
-   * {@inheritdoc}
-   */
-  protected function setUp() {
-    parent::setUp();
-
-    $this->drupalCreateContentType(['type' => 'article']);
-    drupal_static_reset();
-    \Drupal::entityManager()->clearCachedDefinitions();
-    \Drupal::service('router.builder')->rebuild();
-    \Drupal::service('entity.definition_update_manager')->applyUpdates();
-
-    $admin_user = $this->drupalCreateUser([
-      'bypass node access',
-      'administer content types',
-      'administer node fields',
-      'administer node display',
-      'create article content',
-    ]);
-    $this->drupalLogin($admin_user);
-
-    // Make sure local tasks and page title are showing.
-    $this->drupalPlaceBlock('local_tasks_block');
-    $this->drupalPlaceBlock('page_title_block');
-  }
-
-  /**
-   * Creates the test pages.
-   */
-  public function testModule() {
-    $field1 = 'map1';
-    $field2 = 'map2';
-    $field3 = 'xss';
-
-    $address1 = 'Eiffel Tower';
-    $address2 = "Place de l'Université-du-Québec, boulevard Charest Est, Québec, QC G1K";
-    $address2entities = "Place de l&#039;Université-du-Québec, boulevard Charest Est, Québec, QC G1K";
-    $address3 = '<script>alert("hello");</script> Empire State Building';
-
-    // Add three text fields to the Article content type.
-    $this->drupalGet('admin/structure/types/manage/article/fields/add-field');
-    $this->drupalPostForm(NULL, [
-      'new_storage_type' => 'string',
-    ], 'Save and continue');
-    // This opens up the page again with field errors for name and label.
-    $this->drupalPostForm(NULL, [
-      'label' => $field1,
-      'field_name' => $field1,
-    ], 'Save and continue');
-    $this->drupalPostForm(NULL, [], 'Save field settings');
-    $this->drupalPostForm(NULL, [], 'Save settings');
-
-    $this->drupalGet('admin/structure/types/manage/article/fields/add-field');
-    $this->drupalPostForm(NULL, [
-      'new_storage_type' => 'string',
-    ], 'Save and continue');
-    $this->drupalPostForm(NULL, [
-      'label' => $field2,
-      'field_name' => $field2,
-    ], 'Save and continue');
-    $this->drupalPostForm(NULL, [], 'Save field settings');
-    $this->drupalPostForm(NULL, [], 'Save settings');
-
-    $this->drupalGet('admin/structure/types/manage/article/fields/add-field');
-    $this->drupalPostForm(NULL, [
-      'new_storage_type' => 'string',
-    ], 'Save and continue');
-    $this->drupalPostForm(NULL, [
-      'label' => $field3,
-      'field_name' => $field3,
-    ], 'Save and continue');
-    $this->drupalPostForm(NULL, [], 'Save field settings');
-    $this->drupalPostForm(NULL, [], 'Save settings');
-
-    // Set the formatter for all of the fields.
-    $this->drupalGet('admin/structure/types/manage/article/display');
-    $this->assertRaw('Google Map from one-line address');
-    $this->drupalPostForm(NULL, [
-      'fields[field_' . $field1 . '][type]' => 'simple_gmap',
-      'fields[field_' . $field2 . '][type]' => 'simple_gmap',
-      'fields[field_' . $field3 . '][type]' => 'simple_gmap',
-    ], 'Save');
-
-    // Change the settings for all field formatters.
-    $this->drupalPostAjaxForm(NULL, [], 'field_' . $field1 . '_settings_edit');
-    $prefix = 'fields[field_' . $field1 . '][settings_edit_form][settings]';
-    $this->drupalPostForm(NULL, [
-      $prefix . '[include_map]' => TRUE,
-      $prefix . '[include_static_map]' => TRUE,
-      $prefix . '[apikey]' => $this->apiKey,
-      $prefix . '[include_link]' => TRUE,
-      $prefix . '[include_text]' => TRUE,
-    ], 'Update');
-    $this->assertText('Map link: View larger map');
-    $this->assertText('Zoom Level: 14');
-    $this->assertText('Language: en');
-    $this->assertText('Map Type: Map');
-    $this->assertText('Dynamic map');
-    $this->assertText('Static map');
-    $this->assertText('Original text displayed');
-
-    $this->drupalPostAjaxForm(NULL, [], 'field_' . $field2 . '_settings_edit');
-    $prefix = 'fields[field_' . $field2 . '][settings_edit_form][settings]';
-    $this->drupalPostForm(NULL, [
-      $prefix . '[include_map]' => TRUE,
-      $prefix . '[include_static_map]' => TRUE,
-      $prefix . '[apikey]' => $this->apiKey,
-      $prefix . '[include_link]' => TRUE,
-      $prefix . '[link_text]' => 'use_address',
-      $prefix . '[include_text]' => TRUE,
-      $prefix . '[zoom_level]' => 5,
-      $prefix . '[map_type]' => 'k',
-      $prefix . '[langcode]' => 'page',
-    ], 'Update');
-    $this->assertText('Map link: use_address');
-    $this->assertText('Zoom Level: 5');
-    $this->assertText('Language: page');
-    $this->assertText('Map Type: Satellite');
-
-    $this->drupalPostAjaxForm(NULL, [], 'field_' . $field3 . '_settings_edit');
-    $prefix = 'fields[field_' . $field3 . '][settings_edit_form][settings]';
-    $this->drupalPostForm(NULL, [
-      $prefix . '[include_map]' => TRUE,
-      $prefix . '[include_static_map]' => TRUE,
-      $prefix . '[apikey]' => $this->apiKey,
-      $prefix . '[include_link]' => TRUE,
-      $prefix . '[include_text]' => TRUE,
-    ], 'Update');
-
-    // Save all the settings.
-    $this->drupalPostForm(NULL, [], 'Save');
-
-    // Create an article with three addresses.
-    $this->drupalGet('node/add/article');
-    $this->drupalPostForm(NULL, [
-      'title[0][value]' => 'Map test',
-      'field_' . $field1 . '[0][value]' => $address1,
-      'field_' . $field2 . '[0][value]' => $address2,
-      'field_' . $field3 . '[0][value]' => $address3,
-    ], 'Save');
-
-    $this->pass('Open the previous link. In the first field, verify: (1) Both the static and dynamic maps are displayed. (2) The link to the larger map is included, with text "View larger map". (3) If you click the map link, the larger map is shown and "Eiffel Tower" appears in the address box. (4) The text "Eiffel Tower" appears below the maps and link.');
-    $this->pass("In the second field, verify: (1) Both the static and dynamic maps are displayed. (2) They should be zoomed way out to the regional level, rather than street level. (3) They should be satellite images rather than street maps. (4) The link to the larger map is included, but the link text is \"Place de l'Université-du-Québec, boulevard Charest Est, Québec, QC G1K\". (5) Verify that the map link has &hl=en in it (so it picked up the page language). (6) If you click the map link, the larger map is shown and \"Place de l'Université-du-Québec, boulevard Charest Est, Québec, QC G1K\" appears in the address box. (7) The text \"Place de l'Université-du-Québec, boulevard Charest Est, Québec, QC G1K\" appears below the maps and link.");
-    $this->pass("The third field is a XSS test. Verify that the script tags are shown rather than being processed by the browser. Maps will likely show the entire world as it is not a valid address. There should not be a JavaScript alert box shown.");
-
-    $this->assertLink('View larger map');
-    // Looking for this link isn't working, with or without the
-    // entities. Will need to be a manual test.
-    // $this->assertLink($address2entities);
-    $this->assertText($address1);
-    $this->assertText($address2entities);
-    $this->assertText(htmlentities($address3));
-    $this->assertRaw('google.com/maps');
-  }
-
-}
diff --git a/tests/src/FunctionalJavascript/SimpleGmapTest.php b/tests/src/FunctionalJavascript/SimpleGmapTest.php
new file mode 100644
index 0000000..c4afb90
--- /dev/null
+++ b/tests/src/FunctionalJavascript/SimpleGmapTest.php
@@ -0,0 +1,292 @@
+<?php
+
+namespace Drupal\Tests\simple_gmap\FunctionalJavascript;
+
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+
+/**
+ * Creates a page to look at to test the Simple Google Maps module.
+ *
+ * Run the test, scroll to the bottom, open the last page link, and check
+ * what the verbose message lines say to check on that page. If you want to
+ * check the static maps, be sure to edit this file and put in an API key
+ * that is valid for static maps.
+ *
+ * @group simple_gmap
+ */
+class SimpleGmapTest extends JavascriptTestBase {
+
+  /**
+   * API key for static maps.
+   *
+   * @var string
+   */
+  protected $apiKey = 'Static maps will not work unless you put in a key';
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = [
+    'simple_gmap',
+    'node',
+    'field',
+    'field_ui',
+    'text',
+    'block',
+    'user',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    $this->drupalCreateContentType(['type' => 'article']);
+    drupal_static_reset();
+    \Drupal::entityManager()->clearCachedDefinitions();
+    \Drupal::service('router.builder')->rebuild();
+    \Drupal::service('entity.definition_update_manager')->applyUpdates();
+
+    $admin_user = $this->drupalCreateUser([
+      'bypass node access',
+      'administer content types',
+      'administer node fields',
+      'administer node display',
+      'create article content',
+    ]);
+    $this->drupalLogin($admin_user);
+
+    // Make sure local tasks and page title are showing.
+    $this->drupalPlaceBlock('local_tasks_block');
+    $this->drupalPlaceBlock('page_title_block');
+  }
+
+  /**
+   * Creates the test pages.
+   */
+  public function testModule() {
+    $session = $this->getSession();
+    $assert_session = $this->assertSession();
+
+    $field1 = 'map1';
+    $field2 = 'map2';
+    $field3 = 'xss';
+
+    $address1 = 'Eiffel Tower';
+    $address2 = "Place de l'Université-du-Québec, boulevard Charest Est, Québec, QC G1K";
+    $address2entities = "Place de l&#039;Université-du-Québec, boulevard Charest Est, Québec, QC G1K";
+    $address3 = '<script>alert("hello");</script> Empire State Building';
+
+    // Add three text fields to the Article content type.
+    $this->drupalGet('admin/structure/types/manage/article/fields/add-field');
+    $this->drupalPostForm(NULL, [
+      'new_storage_type' => 'string',
+    ], 'Save and continue');
+    // This opens up the page again with field errors for name and label.
+    $this->drupalPostForm(NULL, [
+      'label' => $field1,
+      'field_name' => $field1,
+    ], 'Save and continue');
+    $this->drupalPostForm(NULL, [], 'Save field settings');
+    $this->drupalPostForm(NULL, [], 'Save settings');
+
+    $this->drupalGet('admin/structure/types/manage/article/fields/add-field');
+    $this->drupalPostForm(NULL, [
+      'new_storage_type' => 'string',
+    ], 'Save and continue');
+    $this->drupalPostForm(NULL, [
+      'label' => $field2,
+      'field_name' => $field2,
+    ], 'Save and continue');
+    $this->drupalPostForm(NULL, [], 'Save field settings');
+    $this->drupalPostForm(NULL, [], 'Save settings');
+
+    $this->drupalGet('admin/structure/types/manage/article/fields/add-field');
+    $this->drupalPostForm(NULL, [
+      'new_storage_type' => 'string',
+    ], 'Save and continue');
+    $this->drupalPostForm(NULL, [
+      'label' => $field3,
+      'field_name' => $field3,
+    ], 'Save and continue');
+    $this->drupalPostForm(NULL, [], 'Save field settings');
+    $this->drupalPostForm(NULL, [], 'Save settings');
+
+    // Set the formatter for all of the fields.
+    $this->drupalGet('admin/structure/types/manage/article/display');
+
+    // Ensure each field is set to the new field formatter.
+    foreach ([$field1, $field2, $field3] as $field) {
+      $fields_page = $session->getPage();
+
+      // Select the form listing the individual field elements.
+      $field_form = $fields_page->find('css', 'form[action="/admin/structure/types/manage/article/display"]');
+      $field_form->selectFieldOption("fields[field_$field][type]", 'Google Map from one-line address');
+
+      // Wait for ajax request to complete - by watching as the selector
+      // becomes disabled and then re-enabled.
+      $selector_hidden = $assert_session->waitForElementVisible('css', "select[name=\"fields[field_$field][type]\"]:disabled");
+      $this->assertNOtNull($selector_hidden);
+      $selector_visible = $assert_session->waitForElementVisible('css', "select[name=\"fields[field_$field][type]\"]:not([disabled])");
+      $this->assertNOtNull($selector_visible);
+    }
+
+    // Hit the form's save button.
+    $updated_page = $session->getPage();
+
+    $updated_form = $updated_page->find('css', 'form[action="/admin/structure/types/manage/article/display"]');
+
+    $updated_form->find('css', 'input[value="Save"]')->click();
+
+    // Wait for save to complete.
+    $message_visible = $assert_session->waitForElementVisible('css', 'div:contains("Your settings have been saved.")');
+    $this->assertNotNull($message_visible);
+
+    // Verify initially flag link is on the page.
+    $display_page = $session->getPage();
+
+    // Find the table row containing the field1 entry.
+    $field1_row = $display_page->find('css', "#field-$field1");
+
+    // Click on the row's edit button (styled with a gear icon).
+    $field1_row->find('css', 'input[alt="Edit"]')->click();
+
+    // Wait for the settings form associated with field1 to appear
+    // with a update button.
+    $update_visible1 = $assert_session->waitForElementVisible('css', 'form input[value="Update"]');
+    $this->assertNotNull($update_visible1);
+
+    $field1_edit_form = $session->getPage();
+    $field1_edit_form->checkField('Include embedded dynamic map');
+    $field1_edit_form->checkField('Include embedded static map');
+    // Checking the 'static map" options causes the API field associated with
+    // field1 to appear.
+    $visible_key1 = $assert_session->waitForElementVisible('css', 'label:contains("Google Maps API key")');
+    $this->assertNotNull($visible_key1);
+
+    $field1_edit_form2 = $session->getPage();
+    $field1_edit_form2->fillField('Google Maps API key', $this->apiKey);
+    $field1_edit_form2->checkField('Include link to map');
+    $field1_edit_form2->checkField('Include original address text');
+    $field1_edit_form2->find('css', 'input[value="Update"]')->click();
+
+    // As the update button completes the edit "gears" icon associated with
+    // field1 will reappear.
+    $visible_gears1 = $assert_session->waitForElementVisible('css', "#field-$field1 input[alt=\"Edit\"]");
+    $this->assertNotNull($visible_gears1);
+
+    // Re-examine the field row containing field1.
+    $display_page_updated = $session->getPage();
+    $field1_row_updated = $display_page_updated->find('css', "#field-$field1");
+
+    // Make assertions about the summary column.
+    $this->assertTrue($field1_row_updated->has('css', 'div:contains("Map link: View larger map")'));
+    $this->assertTrue($field1_row_updated->has('css', 'div:contains("Zoom Level: 14")'));
+    $this->assertTrue($field1_row_updated->has('css', 'div:contains("Language: en")'));
+    $this->assertTrue($field1_row_updated->has('css', 'div:contains("Map Type: Map")'));
+    $this->assertTrue($field1_row_updated->has('css', 'div:contains("Dynamic map")'));
+    $this->assertTrue($field1_row_updated->has('css', 'div:contains("Static map")'));
+    $this->assertTrue($field1_row_updated->has('css', 'div:contains("Original text displayed")'));
+
+    // Shift focus to second field.
+    // Find the table row containing the field2 entry.
+    $field2_row = $display_page->find('css', "#field-$field2");
+
+    // Click on the row's edit button (styled with a gear icon).
+    $field2_row->find('css', 'input[alt="Edit"]')->click();
+
+    // Wait for the settings form associated with field2 to appear
+    // with a update button.
+    $update_visible2 = $assert_session->waitForElementVisible('css', 'form input[value="Update"]');
+    $this->assertNotNull($update_visible2);
+
+    $field2_edit_form = $session->getPage();
+    // Set options on the field2.
+    $field2_edit_form->checkField('Include embedded dynamic map');
+    $field2_edit_form->checkField('Include embedded static map');
+    // Checking the 'static map" options causes the API field to appear.
+    $visible_key2 = $assert_session->waitForElementVisible('css', 'label:contains("Google Maps API key")');
+    $this->assertNotNull($visible_key2);
+
+    $field2_edit_form2 = $session->getPage();
+    $field2_edit_form2->fillField('Google Maps API key', $this->apiKey);
+    $field2_edit_form2->checkField('Include link to map');
+    $field2_edit_form2->fillField('Link text', 'use_address');
+    $field2_edit_form2->fillField('Zoom level', '5');
+    $field2_edit_form2->selectFieldOption('Map type', 'Satellite');
+    $field2_edit_form2->fillField('Language', 'page');
+
+    // Trigger the form to be processsed.
+    $field2_edit_form2->find('css', 'input[value="Update"]')->click();
+
+    // As the update button completes the edit "gears" icon associated with
+    // field 2 will reappear.
+    $visible_gear2 = $assert_session->waitForElementVisible('css', "#field-$field2 input[alt=\"Edit\"]");
+    $this->assertNotNull($visible_gear2);
+
+    // Re-examine the field row containing field2.
+    $field_list_page_updated = $session->getPage();
+    $field2_row_updated = $field_list_page_updated->find('css', "#field-$field2");
+
+    // Make assertions about the summary column.
+    $this->assertTrue($field2_row_updated->has('css', 'div:contains("Map link: use_address")'));
+    $this->assertTrue($field2_row_updated->has('css', 'div:contains("Zoom Level: 5")'));
+    $this->assertTrue($field2_row_updated->has('css', 'div:contains("Language: page")'));
+    $this->assertTrue($field2_row_updated->has('css', 'div:contains("Map Type: Satellite")'));
+
+    // Shift focus to third field.
+    $field3_row = $field_list_page_updated->find('css', "#field-$field3");
+
+    // Click on the row's edit button (styled with a gear icon).
+    $field3_row->find('css', 'input[alt="Edit"]')->click();
+
+    // Wait for the settings form to appear with a update button.
+    $assert_session->waitForElementVisible('css', 'form input[value="Update"]');
+
+    $field3_edit_form = $session->getPage();
+    $field3_edit_form->checkField('Include link to map');
+    $field3_edit_form->checkField('Include embedded static map');
+    // Checking the 'static map" options causes the API field to appear.
+    $visible_key3 = $assert_session->waitForElementVisible('css', 'label:contains("Google Maps API key")');
+    $this->assertNotEmpty($visible_key3);
+    $field3_edit_form2 = $session->getPage();
+    $field3_edit_form2->fillField('Google Maps API key', $this->apiKey);
+    $field3_edit_form2->checkField('Include original address text');
+
+    // Save all the settings.
+    $field3_edit_form2->find('css', 'input[value="Save"]')->click();
+
+    // Create an article and populate three addresses.
+    $this->drupalGet('node/add/article');
+    $add_article_page = $session->getPage();
+    $add_article_page->fillField('Title', 'Map test');
+    $add_article_page->fillField($field1, $address1);
+    $add_article_page->fillField($field2, $address2);
+    $add_article_page->fillField($field3, $address3);
+    $add_article_page->find('css', 'input[value="Save"]')->click();
+
+    // Wait for a message div to appear indicating that the save was successful.
+    $article_message = $assert_session->waitForElementVisible('css', 'div.messages');
+    $this->assertNotNull($article_message);
+    $assert_session->pageTextContains('has been created.');
+
+    $this->pass('Open the previous link. In the first field, verify: (1) Both the static and dynamic maps are displayed. (2) The link to the larger map is included, with text "View larger map". (3) If you click the map link, the larger map is shown and "Eiffel Tower" appears in the address box. (4) The text "Eiffel Tower" appears below the maps and link.');
+    $this->pass("In the second field, verify: (1) Both the static and dynamic maps are displayed. (2) They should be zoomed way out to the regional level, rather than street level. (3) They should be satellite images rather than street maps. (4) The link to the larger map is included, but the link text is \"Place de l'Université-du-Québec, boulevard Charest Est, Québec, QC G1K\". (5) Verify that the map link has &hl=en in it (so it picked up the page language). (6) If you click the map link, the larger map is shown and \"Place de l'Université-du-Québec, boulevard Charest Est, Québec, QC G1K\" appears in the address box. (7) The text \"Place de l'Université-du-Québec, boulevard Charest Est, Québec, QC G1K\" appears below the maps and link.");
+    $this->pass("The third field is a XSS test. Verify that the script tags are shown rather than being processed by the browser. Maps will likely show the entire world as it is not a valid address. There should not be a JavaScript alert box shown.");
+    $article_view_page = $session->getPage();
+
+    // $assert_session->linkExists('View larger map');
+    // Looking for this link isn't working, with or without the
+    // entities. Will need to be a manual test.
+    $this->assertTrue($article_view_page->has('css', "p:contains($address1)"));
+    $this->assertTrue($article_view_page->has('css', "p:contains($address2entities)"));
+    $address3_htmlentities = htmlentities($address3);
+    $this->assertTrue($article_view_page->has('css', "p:contains($address3_htmlentities)"));
+    $this->assertTrue($article_view_page->has('xpath', '//img[contains(@src, "google.com/maps")]'));
+
+  }
+
+}