QE-6782 click nth row in table (#370)

These steps allow the user to click on the element corresponding to the cell specified.
dominodatalab · Oct 9, 2023 · 86c5d12 · 86c5d12
1 parent f0a3367
commit 86c5d12
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,9 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project closely adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 0.166.0
+- Add - functions and steps for clicking a row in a table
+
 ## 0.165.0
 - Change - update dependencies
 

diff --git a/data/www/tables.html b/data/www/tables.html
@@ -1,4 +1,9 @@
 <html>
+  <script>
+    function update(value) {
+      document.querySelector("#input").value = value;
+    }
+  </script>
   <head>
     <title>Tables!</title>
     <style>
@@ -72,6 +77,55 @@
       </tr>
     </table>
 
+    <!-- table with clickable rows --->
+    <label>Clicked:</label><input id="input" type="text"></input>
+    <table>
+      <tr>
+        <th>Color</th>
+        <th>Font</th>
+        <th>Style</th>
+      </tr>
+      <tr role="button" onclick="update('Row 2 clicked');">
+        <td>Red</td>
+        <td>Arial</td>
+        <td>Bold</td>
+      </tr>
+      <tr role="button" onclick="update('Row 3 clicked');">
+        <td>Blue</td>
+        <td>Helvetica</td>
+        <td>Underline</td>
+      </tr>
+      <tr role="button" onclick="update('Row 4 clicked');">
+        <td>Green</td>
+        <td>Times New Roman</td>
+        <td>Italic</td>
+      </tr>
+    </table>
+
+    <!-- table with clickable cells --->
+    <table>
+      <tr>
+        <th>City</th>
+        <th>Country</th>
+        <th>Continent</th>
+      </tr>
+      <tr>
+        <td role="button" onclick="update('Paris clicked');">Paris</td>
+        <td role="button" onclick="update('France clicked');">France</td>
+        <td role="button" onclick="update('Europe clicked');">Europe</td>
+      </tr>
+      <tr>
+        <td role="button" onclick="update('Cairo clicked');">Cairo</td>
+        <td role="button" onclick="update('Egypt clicked');">Egypt</td>
+        <td role="button" onclick="update('Africa clicked');">Africa</td>
+      </tr>
+      <tr>
+        <td role="button" onclick="update('Tokyo clicked');">Tokyo</td>
+        <td role="button" onclick="update('Japan clicked');">Japan</td>
+        <td role="button" onclick="update('Asia clicked');">Asia</td>
+      </tr>
+    </table>
+
     <!-- utility used to delay page loading -->
     <script src="js/util.js"></script>
   </body>

diff --git a/features/browser/tables.feature b/features/browser/tables.feature
@@ -124,3 +124,31 @@ Feature: Tables
      Then I should see "{TABLE_3_VALUE}" is equal to "31"
      When I save "4th" table "3rd" row , "2nd" column  value to a variable "TABLE_4_VALUE"
      Then I should see "{TABLE_4_VALUE}" is equal to "133,000"
+
+  Scenario: User can click specific row in table
+    Given I open a browser at the url "http://{HOST_ADDRESS}:{PORT}/tables.html"
+      And I should see a table that matches the following:
+        | Color  | Font            | Style     |
+        | Red    | Arial           | Bold      |
+        | Blue   | Helvetica       | Underline |
+        | Green  | Times New Roman | Italic    |
+     When I wait to click the "2nd" row in the "5th" table
+     Then I should see the text "Row 2 clicked"
+     When I wait to click the "3rd" row in the "5th" table
+     Then I should see the text "Row 3 clicked"
+     When I wait to click the "4th" row in the "5th" table
+     Then I should see the text "Row 4 clicked"
+
+  Scenario: User can click specific cell in table
+    Given I open a browser at the url "http://{HOST_ADDRESS}:{PORT}/tables.html"
+      And I should see a table that matches the following:
+        | City  | Country | Continent |
+        | Paris | France  | Europe    |
+        | Cairo | Egypt   | Africa    |
+        | Tokyo | Japan   | Asia      |
+     When I wait to click the cell corresponding to the "2nd" row and "2nd" column in the "6th" table
+     Then I should see the text "France clicked"
+     When I wait to click the cell corresponding to the "3rd" row and "3rd" column in the "6th" table
+     Then I should see the text "Africa clicked"
+     When I wait to click the cell corresponding to the "4th" row and "1st" column in the "6th" table
+     Then I should see the text "Tokyo clicked"
diff --git a/pyproject.toml b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "cucu"
-version = "0.165.0"
+version = "0.166.0"
 license = "MIT"
 description = "Easy BDD web testing"
 authors = ["Domino Data Lab <[email protected]>"]

diff --git a/src/cucu/steps/table_steps.py b/src/cucu/steps/table_steps.py
@@ -2,6 +2,8 @@
 import re
 from io import StringIO
 
+from selenium.webdriver.common.by import By
+
 from cucu import config, format_gherkin_table, fuzzy, helpers, retry, step
 from cucu.browser.frames import run_in_all_frames
 
@@ -274,3 +276,69 @@ def get_table_cell_value(ctx, table, row, column, variable_name):
             f"Cannot find table:{table+1},row:{row+1},column:{column+1}. Please check your table data."
         )
     config.CONFIG[variable_name] = cell_value
+
+
+def find_table_element(ctx, nth=1):
+    """
+    Return the nth table as a WebElement
+
+    parameters:
+      ctx(object): behave context object used to share data between steps
+      nth(int): specifies the exact table within the list of available tables to match against.
+                Defaults to 1st table.
+
+    returns:
+      A selenium WebElement associated with the table that was specified
+    """
+    ctx.check_browser_initialized()
+
+    try:
+        return ctx.browser.css_find_elements("table")[nth]
+    except IndexError:
+        raise RuntimeError(
+            f"Cannot find table:{nth+1}. Please check your table data."
+        )
+
+
+def click_table_cell(ctx, row, column, table):
+    """
+    Clicks the cell corresponding to the given row and column
+
+    parameters:
+      ctx(object): behave context object used to share data between steps
+      row(int): the row of the table to click
+      column(int): the column of the table to click
+      table(int): specifies the exact table within the list of available tables to match against.
+    """
+    table_element = find_table_element(ctx, table)
+
+    try:
+        row = table_element.find_elements(By.CSS_SELECTOR, "tbody tr")[row]
+        cell = row.find_elements(By.CSS_SELECTOR, "td")[column]
+    except IndexError:
+        raise RuntimeError(
+            f"Cannot find table:{table+1},row:{row+1},column:{column+1}. Please check your table data."
+        )
+    ctx.browser.click(cell)
+
+
+@step('I wait to click the "{row:nth}" row in the "{table:nth}" table')
+def wait_click_table_row(ctx, row, table):
+    """
+    Add 1 to the row number if the table has a header row.
+
+    Note: Firefox is unable to click directly on a row <tr> if it has child columns <td>.
+    In order to workaround this, the step just clicks the first column <td> of the row <tr>.
+    Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1448825
+    """
+    retry(click_table_cell)(ctx, row, 1, table)
+
+
+@step(
+    'I wait to click the cell corresponding to the "{row:nth}" row and "{column:nth}" column in the "{table:nth}" table'
+)
+def wait_click_table_cell(ctx, row, column, table):
+    """
+    Add 1 to the row number if the table has a header row.
+    """
+    retry(click_table_cell)(ctx, row, column, table)