update query_builder.spec.js to use webchauffeur with :contains() and :react() [ci e2e]

.flowconfig

@@ -17,7 +17,7 @@ esproposal.decorators=ignore
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
 suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
-module.name_mapper='.*\(.css\)' -> 'CSSModule'
+module.name_mapper='.*\(\.css\)' -> 'CSSModule'
 module.system=haste
 strip_root=true
 module.file_ext=.js

frontend/interfaces/webdriver.js

-
-declare module "selenium-webdriver" {
-
-    declare class WebDriver {
-        get(url: string): Promise<void>;
-        wait(condition: Condition|Function, timeout: ?number): WebElementPromise;
-        findElement(selector: By): WebElementPromise;
-        deleteAllCookies(): Promise<void>;
-        getCurrentUrl(): Promise<string>;
-    }
-
-    declare class WebElement {
-        findElement(selector: By): WebElementPromise;
-        click(): Promise<void>;
-        sendKeys(keys: string): Promise<void>;
-        clear(): Promise<void>;
-        getText(): Promise<string>;
-        getAttribute(attribute: string): Promise<string>;
-    }
-
-    declare class WebElementPromise extends WebElement {
-    }
-
-    declare class Condition {
-    }
-
-    declare class By {
-        static css(selector: string): By;
-        static xpath(selector: string): By;
-    }
-
-    declare class until {
-        static elementLocated(selector: By): Condition;
-    }
-}

frontend/test/e2e/query_builder/query_builder.spec.js

 
 import {
-    waitForElementRemoved,
-    waitForElementAndClick,
-    waitForElementAndSendKeys,
     screenshot,
     describeE2E,
     ensureLoggedIn
@@ -17,132 +14,134 @@ describeE2E("query_builder", () => {
 
     describe("tables", () => {
         it("should allow users to create pivot tables", async () => {
-            await driver.get(`${server.host}/q`);
+            // load the query builder and screenshot blank
+            await d.get("/q");
+            await d.screenshot("screenshots/qb-initial.png");
 
-            await screenshot(driver, "screenshots/qb-initial.png");
+            // pick the orders table (assumes database is already selected, i.e. there's only 1 database)
+            await d.select("#TablePicker .List-item a:contains(Orders)").wait().click();
 
-            await waitForElementAndClick(driver, "#TablePicker .List-item:first-child>a");
+            await d.select(":react(AggregationWidget)").wait().click();
 
-            await waitForElementAndClick(driver, "#Query-section-aggregation");
-            await waitForElementAndClick(driver, "#AggregationPopover .List-item:nth-child(2)>a");
+            await d.select("#AggregationPopover .List-item:nth-child(2)>a").wait().click();
 
-            await waitForElementAndClick(driver, ".Query-section.Query-section-breakout #BreakoutWidget");
-            await waitForElementAndClick(driver, "#BreakoutPopover .List-section:nth-child(3) .List-section-header");
-            await waitForElementAndClick(driver, "#BreakoutPopover .List-item:nth-child(12)>a");
+            await d.select(".Query-section.Query-section-breakout #BreakoutWidget").wait().click();
+            await d.select("#BreakoutPopover .List-section:nth-child(3) .List-section-header").wait().click();
+            await d.select("#BreakoutPopover .List-item:nth-child(12)>a").wait().click();
 
-            await waitForElementAndClick(driver, ".Query-section.Query-section-breakout #BreakoutWidget .AddButton");
-            await waitForElementAndClick(driver, "#BreakoutPopover .List-item:first-child .Field-extra>a");
-            await waitForElementAndClick(driver, "#TimeGroupingPopover .List-item:nth-child(4)>a");
+            await d.select(".Query-section.Query-section-breakout #BreakoutWidget .AddButton").wait().click();
+            await d.select("#BreakoutPopover .List-item:first-child .Field-extra>a").wait().click();
+            await d.select("#TimeGroupingPopover .List-item:nth-child(4)>a").wait().click();
 
-            await waitForElementAndClick(driver, ".Button.RunButton");
+            await d.select(".Button.RunButton").wait().click();
 
-            await waitForElementRemoved(driver, ".Loading", 20000);
-            await screenshot(driver, "screenshots/qb-pivot-table.png");
+            await d.select(".Loading").waitRemoved(20000);
+            await d.screenshot("screenshots/qb-pivot-table.png");
 
             // save question
-            await waitForElementAndClick(driver, ".Header-buttonSection:first-child");
-            await waitForElementAndSendKeys(driver, "#SaveQuestionModal input[name='name']", 'Pivot Table');
-            await waitForElementAndClick(driver, "#SaveQuestionModal .Button.Button--primary");
+            await d.select(".Header-buttonSection:first-child").wait().click();
+            await d.select("#SaveQuestionModal input[name='name']").wait().sendKeys("Pivot Table");
+            await d.select("#SaveQuestionModal .Button.Button--primary").wait().click();
 
             // add to new dashboard
-            await waitForElementAndClick(driver, "#QuestionSavedModal .Button.Button--primary");
-            await waitForElementAndSendKeys(driver, "#CreateDashboardModal input[name='name']", 'Main Dashboard');
-            await waitForElementAndClick(driver, "#CreateDashboardModal .Button.Button--primary");
+            await d.select("#QuestionSavedModal .Button.Button--primary").wait().click();
+            await d.select("#CreateDashboardModal input[name='name']").wait().sendKeys("Main Dashboard");
+            await d.select("#CreateDashboardModal .Button.Button--primary").wait().click();
 
             // save dashboard
-            await waitForElementAndClick(driver, ".EditHeader .Button.Button--primary");
-            await waitForElementRemoved(driver, ".EditHeader");
+            await d.select(".EditHeader .Button.Button--primary").wait().click();
+            await d.select(".EditHeader").waitRemoved();
         });
     });
 
     describe("charts", () => {
         xit("should allow users to create line charts", async () => {
-            await driver.get(`${server.host}/q`);
+            await d.get("/q");
 
             // select orders table
-            await waitForElementAndClick(driver, "#TablePicker .List-item:first-child>a");
+            await d.select("#TablePicker .List-item:first-child>a").wait().click();
 
             // select filters
-            await waitForElementAndClick(driver, ".GuiBuilder-filtered-by .Query-section:not(.disabled) a");
+            await d.select(".GuiBuilder-filtered-by .Query-section:not(.disabled) a").wait().click();
 
-            await waitForElementAndClick(driver, "#FilterPopover .List-item:first-child>a");
+            await d.select("#FilterPopover .List-item:first-child>a").wait().click();
 
-            await waitForElementAndClick(driver, ".Button[data-ui-tag='relative-date-shortcut-this-year']");
-            await waitForElementAndClick(driver, ".Button[data-ui-tag='add-filter']:not(.disabled)");
+            await d.select(".Button[data-ui-tag='relative-date-shortcut-this-year']").wait().click();
+            await d.select(".Button[data-ui-tag='add-filter']:not(.disabled)").wait().click();
 
             // select aggregations
-            await waitForElementAndClick(driver, "#Query-section-aggregation");
-            await waitForElementAndClick(driver, "#AggregationPopover .List-item:nth-child(2)>a");
+            await d.select("#Query-section-aggregation").wait().click();
+            await d.select("#AggregationPopover .List-item:nth-child(2)>a").wait().click();
 
             // select breakouts
-            await waitForElementAndClick(driver, ".Query-section.Query-section-breakout>div");
+            await d.select(".Query-section.Query-section-breakout>div").wait().click();
 
-            await waitForElementAndClick(driver, "#BreakoutPopover .List-item:first-child .Field-extra>a");
-            await waitForElementAndClick(driver, "#TimeGroupingPopover .List-item:nth-child(3)>a");
+            await d.select("#BreakoutPopover .List-item:first-child .Field-extra>a").wait().click();
+            await d.select("#TimeGroupingPopover .List-item:nth-child(3)>a").wait().click();
 
             // run query
-            await waitForElementAndClick(driver, ".Button.RunButton");
+            await d.select(".Button.RunButton").wait().click();
 
-            await waitForElementAndClick(driver, "#VisualizationTrigger");
+            await d.select("#VisualizationTrigger").wait().click();
             // this step occassionally fails without the timeout
-            await driver.sleep(500);
-            await waitForElementAndClick(driver, "#VisualizationPopover li:nth-child(3)");
+            await d.sleep(500);
+            await d.select("#VisualizationPopover li:nth-child(3)").wait().click();
 
             await screenshot(driver, "screenshots/qb-line-chart.png");
 
             // save question
-            await waitForElementAndClick(driver, ".Header-buttonSection:first-child");
-            await waitForElementAndSendKeys(driver, "#SaveQuestionModal input[name='name']", 'Line Chart');
-            await waitForElementAndClick(driver, "#SaveQuestionModal .Button.Button--primary");
+            await d.select(".Header-buttonSection:first-child").wait().click();
+            await d.select("#SaveQuestionModal input[name='name']").wait().sendKeys("Line Chart");
+            await d.select("#SaveQuestionModal .Button.Button--primary").wait().click();
 
             // add to existing dashboard
-            await driver.sleep(500);
-            await waitForElementAndClick(driver, "#QuestionSavedModal .Button.Button--primary");
-            await waitForElementAndClick(driver, "#AddToDashSelectDashModal .SortableItemList-list li:first-child>a");
+            await d.sleep(500);
+            await d.select("#QuestionSavedModal .Button.Button--primary").wait().click();
+            await d.select("#AddToDashSelectDashModal .SortableItemList-list li:first-child>a").wait().click();
 
             // save dashboard
-            await waitForElementAndClick(driver, ".EditHeader .Button.Button--primary");
-            await waitForElementRemoved(driver, ".EditHeader");
+            await d.select(".EditHeader .Button.Button--primary").wait().click();
+            await d.select(".EditHeader").waitRemoved();
         });
 
         xit("should allow users to create bar charts", async () => {
             // load line chart
-            await driver.get(`${server.host}/card/2`);
+            await d.get("/card/2");
 
             // dismiss saved questions modal
-            await waitForElementAndClick(driver, ".Modal .Button.Button--primary");
+            await d.select(".Modal .Button.Button--primary").wait().click();
 
             // change breakouts
-            await waitForElementAndClick(driver, ".View-section-breakout.SelectionModule");
+            await d.select(".View-section-breakout.SelectionModule").wait().click();
 
-            await waitForElementAndClick(driver, "#BreakoutPopover .List-item:first-child .Field-extra>a");
-            await waitForElementAndClick(driver, "#TimeGroupingPopover .List-item:nth-child(4)>a");
+            await d.select("#BreakoutPopover .List-item:first-child .Field-extra>a").wait().click();
+            await d.select("#TimeGroupingPopover .List-item:nth-child(4)>a").wait().click();
 
             // change visualization
-            await waitForElementAndClick(driver, "#VisualizationTrigger");
+            await d.select("#VisualizationTrigger").wait().click();
             // this step occassionally fails without the timeout
-            await driver.sleep(500);
-            await waitForElementAndClick(driver, "#VisualizationPopover li:nth-child(4)");
+            await d.sleep(500);
+            await d.select("#VisualizationPopover li:nth-child(4)").wait().click();
 
             // run query
-            await waitForElementAndClick(driver, ".Button.RunButton");
-            await waitForElementRemoved(driver, ".Loading", 20000);
+            await d.select(".Button.RunButton").wait().click();
+            await d.select(".Loading").waitRemoved(20000);
 
             await screenshot(driver, "screenshots/qb-bar-chart.png");
 
             // save question
-            await waitForElementAndClick(driver, ".Header-buttonSection:first-child");
-            await waitForElementAndSendKeys(driver, "#SaveQuestionModal input[name='name']", 'Bar Chart');
-            await waitForElementAndClick(driver, "#SaveQuestionModal .Button.Button--primary");
+            await d.select(".Header-buttonSection:first-child").wait().click();
+            await d.select("#SaveQuestionModal input[name='name']").wait().sendKeys("Bar Chart");
+            await d.select("#SaveQuestionModal .Button.Button--primary").wait().click();
 
             // add to existing dashboard
-            await driver.sleep(500);
-            await waitForElementAndClick(driver, "#QuestionSavedModal .Button.Button--primary");
-            await waitForElementAndClick(driver, "#AddToDashSelectDashModal .SortableItemList-list li:first-child>a");
+            await d.sleep(500);
+            await d.select("#QuestionSavedModal .Button.Button--primary").wait().click();
+            await d.select("#AddToDashSelectDashModal .SortableItemList-list li:first-child>a").wait().click();
 
             // save dashboard
-            await waitForElementAndClick(driver, ".EditHeader .Button.Button--primary");
-            await waitForElementRemoved(driver, ".EditHeader");
+            await d.select(".EditHeader .Button.Button--primary").wait().click();
+            await d.select(".EditHeader").waitRemoved();
         });
     });
 });

frontend/test/e2e/support/utils.js

@@ -217,7 +217,9 @@ export const describeE2E = (name, options, describeCallback) => {
             ]);
 
             global.driver = webdriver.driver;
-            global.d = new Driver(webdriver.driver);
+            global.d = new Driver(webdriver.driver, {
+                base: server.host
+            });
             global.server = server;
 
             await driver.get(`${server.host}/`);

package.json

@@ -117,7 +117,7 @@
     "selenium-webdriver": "^2.53.3",
     "style-loader": "^0.13.0",
     "unused-files-webpack-plugin": "^2.0.2",
-    "webchauffeur": "^1.0.1",
+    "webchauffeur": "^1.1.0",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.0",
     "webpack-hot-middleware": "^2.10.0",

yarn.lock

@@ -160,6 +160,10 @@ amdefine@>=0.0.4:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.0.tgz#fd17474700cb5cc9c2b709f0be9d23ce3c198c33"
 
+annotate-react-dom@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/annotate-react-dom/-/annotate-react-dom-1.0.0.tgz#446b4667620c2d071344401344747b4fd7680b6f"
+
 ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
@@ -1218,6 +1222,10 @@ bluebird@^3.0.5, bluebird@^3.3.3, bluebird@^3.3.4, bluebird@^3.4.1:
   version "3.4.6"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.6.tgz#01da8d821d87813d158967e743d5fe6c62cf8c0f"
 
+bo-selector@0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/bo-selector/-/bo-selector-0.0.10.tgz#9816dcb00adf374ea87941a863b2acfc026afa3e"
+
 body-parser@^1.12.4:
   version "1.15.2"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.15.2.tgz#d7578cf4f1d11d5f6ea804cef35dc7a7ff6dae67"
@@ -1842,6 +1850,13 @@ css-selector-tokenizer@^0.6.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
+css-to-xpath@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/css-to-xpath/-/css-to-xpath-0.1.0.tgz#ac0d1c26cef023f7bd8cf2e1fc1f77134bc70c47"
+  dependencies:
+    bo-selector "0.0.10"
+    xpath-builder "0.0.7"
+
 css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -4415,6 +4430,14 @@ mz@^2.3.1:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
+mz@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.6.0.tgz#c8b8521d958df0a4f2768025db69c719ee4ef1ce"
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nan@^2.3.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.4.0.tgz#fb3c59d45fe4effe215f0b890f8adf6eb32d2232"
@@ -6966,10 +6989,13 @@ watchpack@^0.2.1:
     chokidar "^1.0.0"
     graceful-fs "^4.1.2"
 
-webchauffeur:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/webchauffeur/-/webchauffeur-1.0.1.tgz#ed9d4ae28bb3a2e87d755b2d470c535e39cf30e4"
+webchauffeur@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/webchauffeur/-/webchauffeur-1.1.0.tgz#b0abe64978c655472b181ff4c49752c33fdd12f7"
   dependencies:
+    annotate-react-dom "^1.0.0"
+    css-to-xpath "^0.1.0"
+    mz "^2.6.0"
     promise-chain-decorator "^1.2.0"
 
 webpack-core@~0.6.0:
@@ -7162,6 +7188,10 @@ xmlhttprequest-ssl@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.1.tgz#3b7741fea4a86675976e908d296d4445961faa67"
 
+xpath-builder@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/xpath-builder/-/xpath-builder-0.0.7.tgz#67d6bbc3f6a320ec317e3e6368c5706b6111deec"
+
 xtend@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"