diff --git a/core/modules/book/src/Tests/BookBreadcrumbTest.php b/core/modules/book/tests/src/Functional/BookBreadcrumbTest.php
similarity index 95%
rename from core/modules/book/src/Tests/BookBreadcrumbTest.php
rename to core/modules/book/tests/src/Functional/BookBreadcrumbTest.php
index 57e1b3d..69c0d62 100644
--- a/core/modules/book/src/Tests/BookBreadcrumbTest.php
+++ b/core/modules/book/tests/src/Functional/BookBreadcrumbTest.php
@@ -1,15 +1,15 @@
 <?php
 
-namespace Drupal\book\Tests;
+namespace Drupal\Tests\book\Functional;
 
-use Drupal\simpletest\WebTestBase;
+use Drupal\Tests\BrowserTestBase;
 
 /**
  * Create a book, add pages, and test book interface.
  *
  * @group book
  */
-class BookBreadcrumbTest extends WebTestBase {
+class BookBreadcrumbTest extends BrowserTestBase {
 
   /**
    * Modules to install.
@@ -148,7 +148,7 @@ public function testBreadcrumbTitleUpdates() {
     $links = $this->xpath('//nav[@class="breadcrumb"]/ol/li/a');
     $got_breadcrumb = array();
     foreach ($links as $link) {
-      $got_breadcrumb[] = (string) $link;
+      $got_breadcrumb[] = $link->getText();
     }
     // Home link and four parent book nodes should be in the breadcrumb.
     $this->assertEqual(5, count($got_breadcrumb));
@@ -162,7 +162,7 @@ public function testBreadcrumbTitleUpdates() {
     $links = $this->xpath('//nav[@class="breadcrumb"]/ol/li/a');
     $got_breadcrumb = array();
     foreach ($links as $link) {
-      $got_breadcrumb[] = (string) $link;
+      $got_breadcrumb[] = $link->getText();
     }
     $this->assertEqual(5, count($got_breadcrumb));
     $this->assertEqual($edit['title[0][value]'], end($got_breadcrumb));
@@ -183,7 +183,7 @@ public function testBreadcrumbAccessUpdates() {
     $links = $this->xpath('//nav[@class="breadcrumb"]/ol/li/a');
     $got_breadcrumb = array();
     foreach ($links as $link) {
-      $got_breadcrumb[] = (string) $link;
+      $got_breadcrumb[] = $link->getText();
     }
     $this->assertEqual(5, count($got_breadcrumb));
     $this->assertEqual($edit['title[0][value]'], end($got_breadcrumb));
@@ -193,7 +193,7 @@ public function testBreadcrumbAccessUpdates() {
     $links = $this->xpath('//nav[@class="breadcrumb"]/ol/li/a');
     $got_breadcrumb = array();
     foreach ($links as $link) {
-      $got_breadcrumb[] = (string) $link;
+      $got_breadcrumb[] = $link->getText();
     }
     $this->assertEqual(4, count($got_breadcrumb));
     $this->assertEqual($nodes[2]->getTitle(), end($got_breadcrumb));
diff --git a/core/modules/book/src/Tests/BookTest.php b/core/modules/book/tests/src/Functional/BookTest.php
similarity index 95%
rename from core/modules/book/src/Tests/BookTest.php
rename to core/modules/book/tests/src/Functional/BookTest.php
index 0158992..3153bcb 100644
--- a/core/modules/book/src/Tests/BookTest.php
+++ b/core/modules/book/tests/src/Functional/BookTest.php
@@ -1,11 +1,11 @@
 <?php
 
-namespace Drupal\book\Tests;
+namespace Drupal\Tests\book\Functional;
 
 use Drupal\Component\Utility\SafeMarkup;
 use Drupal\Core\Cache\Cache;
 use Drupal\Core\Entity\EntityInterface;
-use Drupal\simpletest\WebTestBase;
+use Drupal\Tests\BrowserTestBase;
 use Drupal\user\RoleInterface;
 
 /**
@@ -13,7 +13,7 @@
  *
  * @group book
  */
-class BookTest extends WebTestBase {
+class BookTest extends BrowserTestBase {
 
   /**
    * Modules to install.
@@ -296,7 +296,7 @@ function checkBookNode(EntityInterface $node, $nodes, $previous = FALSE, $up = F
     $links = $this->xpath('//nav[@class="breadcrumb"]/ol/li/a');
     $got_breadcrumb = array();
     foreach ($links as $link) {
-      $got_breadcrumb[] = (string) $link['href'];
+      $got_breadcrumb[] = $link->getAttribute('href');
     }
 
     // Compare expected and got breadcrumbs.
@@ -571,34 +571,6 @@ function testBookDelete() {
   }
 
   /**
-   * Tests re-ordering of books.
-   */
-  public function testBookOrdering() {
-    // Create new book.
-    $this->createBook();
-    $book = $this->book;
-
-    $this->drupalLogin($this->adminUser);
-    $node1 = $this->createBookNode($book->id());
-    $node2 = $this->createBookNode($book->id());
-    $pid = $node1->book['nid'];
-
-    // Head to admin screen and attempt to re-order.
-    $this->drupalGet('admin/structure/book/' . $book->id());
-    $edit = array(
-      "table[book-admin-{$node1->id()}][weight]" => 1,
-      "table[book-admin-{$node2->id()}][weight]" => 2,
-      // Put node 2 under node 1.
-      "table[book-admin-{$node2->id()}][pid]" => $pid,
-    );
-    $this->drupalPostForm(NULL, $edit, t('Save book pages'));
-    // Verify weight was updated.
-    $this->assertFieldByName("table[book-admin-{$node1->id()}][weight]", 1);
-    $this->assertFieldByName("table[book-admin-{$node2->id()}][weight]", 2);
-    $this->assertFieldByName("table[book-admin-{$node2->id()}][pid]", $pid);
-  }
-
-  /**
    * Tests outline of a book.
    */
   public function testBookOutline() {
@@ -718,7 +690,7 @@ public function testAdminBookNodeListing() {
     $this->assertText($this->book->label(), 'The book title is displayed on the administrative book listing page.');
 
     $elements = $this->xpath('//table//ul[@class="dropbutton"]/li/a');
-    $this->assertEqual((string) $elements[0], 'View', 'View link is found from the list.');
+    $this->assertEqual((string) $elements[0]->getText(), 'View', 'View link is found from the list.');
   }
 
   /**
diff --git a/core/modules/book/tests/src/FunctionalJavascript/BookJavascriptTest.php b/core/modules/book/tests/src/FunctionalJavascript/BookJavascriptTest.php
new file mode 100644
index 0000000..1af143c
--- /dev/null
+++ b/core/modules/book/tests/src/FunctionalJavascript/BookJavascriptTest.php
@@ -0,0 +1,141 @@
+<?php
+
+namespace Drupal\Tests\book\FunctionalJavascript;
+
+use Behat\Mink\Exception\ExpectationException;
+use Drupal\Component\Render\FormattableMarkup;
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+use Drupal\node\Entity\Node;
+
+/**
+ * Tests Book javascript functionality.
+ *
+ * @group book
+ */
+class BookJavascriptTest extends JavascriptTestBase {
+
+  /**
+   * Modules to install.
+   *
+   * @var array
+   */
+  public static $modules = ['book'];
+
+  /**
+   * Tests re-ordering of books.
+   */
+  public function testBookOrdering() {
+    $book = Node::create([
+      'type' => 'book',
+      'title' => 'Book',
+      'book' => ['bid' => 'new'],
+    ]);
+    $book->save();
+    $page1 = Node::create([
+      'type' => 'book',
+      'title' => '1st page',
+      'book' => ['bid' => $book->id(), 'pid' => $book->id(), 'weight' => 0],
+    ]);
+    $page1->save();
+    $page2 = Node::create([
+      'type' => 'book',
+      'title' => '2nd page',
+      'book' => ['bid' => $book->id(), 'pid' => $book->id(), 'weight' => 1],
+    ]);
+    $page2->save();
+
+    // Head to admin screen and attempt to re-order.
+    $this->drupalLogin($this->drupalCreateUser(['administer book outlines']));
+    $this->drupalGet('admin/structure/book/' . $book->id());
+
+    $page = $this->getSession()->getPage();
+
+    $weight_select1 = $page->findField("table[book-admin-{$page1->id()}][weight]");
+    $weight_select2 = $page->findField("table[book-admin-{$page2->id()}][weight]");
+
+    // Check that rows weight selects are hidden.
+    $this->assertFalse($weight_select1->isVisible());
+    $this->assertFalse($weight_select2->isVisible());
+
+    // Check that '2nd page' row is heavier than '1st page' row.
+    $this->assertGreaterThan($weight_select1->getValue(), $weight_select2->getValue());
+
+    // Check that '1st page' precedes the '2nd page'.
+    $this->assertOrderInPage(['1st page', '2nd page']);
+
+    // Check that the 'unsaved changes' text is not present in the message area.
+    $this->assertSession()->pageTextNotContains('You have unsaved changes.');
+
+    // Drag and drop the '1st page' row over the '2nd page' row.
+    // @todo: Test also the reverse, '2nd page' over '1st page', when
+    //   https://www.drupal.org/node/2769825 is fixed.
+    // @see https://www.drupal.org/node/2769825
+    $dragged = $this->xpath("//tr[@data-drupal-selector='edit-table-book-admin-{$page1->id()}']//a[@class='tabledrag-handle']")[0];
+    $target = $this->xpath("//tr[@data-drupal-selector='edit-table-book-admin-{$page2->id()}']//a[@class='tabledrag-handle']")[0];
+    $dragged->dragTo($target);
+
+    // Give javascript some time to manipulate the DOM.
+    $this->getSession()->wait(1000, 'jQuery(".tabledrag-changed-warning").is(":visible")');
+
+    // Check that the 'unsaved changes' text appeared in the message area.
+    $this->assertSession()->pageTextContains('You have unsaved changes.');
+
+    // Check that '2nd page' page precedes the '1st page'.
+    $this->assertOrderInPage(['2nd page', '1st page']);
+
+    // Toggle row weight selects as visible.
+    $page->findButton('Show row weights')->click();
+
+    // Check that rows weight selects are visible.
+    $this->assertTrue($weight_select1->isVisible());
+    $this->assertTrue($weight_select2->isVisible());
+
+    // Check that '1st page' row became heavier than '2nd page' row.
+    $this->assertGreaterThan($weight_select2->getValue(), $weight_select1->getValue());
+
+    // Toggle row weight selects back to hidden.
+    $page->findButton('Hide row weights')->click();
+
+    // Check that rows weight selects are hidden again.
+    $this->assertFalse($weight_select1->isVisible());
+    $this->assertFalse($weight_select2->isVisible());
+
+    $this->submitForm([], 'Save book pages');
+    $this->assertSession()->pageTextContains(new FormattableMarkup('Updated book @book.', ['@book' => $book->getTitle()]));
+
+    // Check again that '2nd page' is on top after form submit.
+    $this->assertOrderInPage(['2nd page', '1st page']);
+
+    // Check that page reordering was done in the backend.
+    $page1 = Node::load($page1->id());
+    $page2 = Node::load($page2->id());
+    $this->assertGreaterThan($page2->book['weight'], $page1->book['weight']);
+  }
+
+  /**
+   * Asserts that several pieces of markup are in a given order in the page.
+   *
+   * @param string[] $items
+   *   An ordered list of strings.
+   *
+   * @throws \Behat\Mink\Exception\ExpectationException
+   *   When any of the given string is not found.
+   */
+  protected function assertOrderInPage(array $items) {
+    $session = $this->getSession();
+    $text = $session->getPage()->getHtml();
+    $strings = [];
+    foreach ($items as $item) {
+      if (($pos = strpos($text, $item)) === FALSE) {
+        throw new ExpectationException("Cannot find '$item' in the page", $session->getDriver());
+      }
+      $strings[$pos] = $item;
+    }
+    ksort($strings);
+    $ordered = implode(', ', array_map(function ($item) {
+      return "'$item'";
+    }, $items));
+    $this->assertSame($items, array_values($strings), "Found strings, ordered as: $ordered.");
+  }
+
+}
