Merge pull request #95 from mozilla/sl/tile-menu-options

Tile Options (new tab)

Author: sarinali

modules/data/navigation.components.json

@@ -160,5 +160,29 @@
         "groups": [
             "doNotCache"
         ]
+    },
+
+    "sponsored-site-card": {
+        "selectorData": "top-site-outer",
+        "strategy": "class",
+        "groups": []
+    },
+
+    "sponsored-site-card-menu-button": {
+        "selectorData": "button[class=\"context-menu-button icon\"]",
+        "strategy": "css",
+        "groups": []
+    },
+
+    "sponsored-site-context-menu": {
+        "selectorData": "context-menu",
+        "strategy": "class",
+        "groups": []
+    },
+
+    "sponsored-site-context-menu-list": {
+        "selectorData": "ul[class=\"context-menu-list\"]",
+        "strategy": "css",
+        "groups": []
     }
-}
+}

modules/util.py

@@ -6,7 +6,7 @@
 import re
 from os import remove
 from random import shuffle
-from typing import Literal, Union
+from typing import List, Literal, Union
 
 from faker import Faker
 from faker.providers import internet, misc
@@ -266,6 +266,56 @@ def fake_credit_card_data(self) -> CreditCardBase:
 
         return fake_data
 
+    def write_css_properties(
+        self, file_path: str, element: WebElement, driver: Firefox, chrome=False
+    ):
+        """
+        Executes JavaScript to get all of the CSS properties of a WebElement then dumps it in the specified file path location. Outputs in JSON format
+        """
+        css_properties = ""
+        if chrome:
+            with driver.context(driver.CONTEXT_CHROME):
+                css_properties = driver.execute_script(
+                    """
+var s = window.getComputedStyle(arguments[0]);
+var props = {};
+for (var i = 0; i < s.length; i++) {
+    props[s[i]] = s.getPropertyValue(s[i]);
+}
+return props;
+            """,
+                    element,
+                )
+
+        else:
+            css_properties = driver.execute_script(
+                """
+var s = window.getComputedStyle(arguments[0]);
+var props = {};
+for (var i = 0; i < s.length; i++) {
+    props[s[i]] = s.getPropertyValue(s[i]);
+}
+return props;
+    """,
+                element,
+            )
+
+        with open(file_path, "w") as file:
+            json.dump(css_properties, file, indent=4)
+        logging.info(f"CSS properties saved to {file_path}")
+
+    def match_regex(self, pattern: str, to_match: List[str]) -> List[str]:
+        """
+        Given a list of logs/strings, this method will return the matches within the string that match the given regex expression.
+        """
+        matches = []
+        for string in to_match:
+            match = re.findall(pattern, string)
+            if len(match) > 0:
+                matches.append(match[0])
+
+        return matches
+
     def normalize_phone_number(self, phone: str, default_country_code="1") -> str:
         """
         Given a phone number in some format, +1(xxx)-xxx-xxxx or something similar, it will strip the phone number

tests/address_bar_and_search/conftest.py

@@ -20,6 +20,11 @@ def set_prefs(add_prefs: dict):
         ("privacy.donottrackheader.enabled", False),
         ("telemetry.fog.test.localhost_port", 5312),
         ("datareporting.healthreport.uploadEnabled", True),
+        ("browser.newtabpage.enabled", True),
+        ("browser.newtabpage.activity-stream.system.showSponsored", True),
+        ("browser.newtabpage.activity-stream.showSponsoredTopSites", True),
+        ("browser.topsites.useRemoteSetting", True),
+        ("browser.topsites.contile.enabled", True),
     ]
     prefs.extend(add_prefs)
     return prefs

tests/address_bar_and_search/test_tile_menu_options.py

@@ -0,0 +1,147 @@
+import logging
+
+import pytest
+from selenium.webdriver import Firefox
+
+from modules.browser_object import TabBar
+from modules.page_object import Navigation
+from modules.util import Utilities
+
+ALLOWED_RGB_BEFORE_VALUES_CARD = set(["rgba(0, 0, 0, 0)"])
+ALLOWED_RGB_AFTER_VALUES_CARD = set(
+    ["color(srgb 0.878824 0.878824 0.885882)", "color(srgb 0.334902 0.331765 0.36)"]
+)
+ALLOWED_RGB_VALUES_BEFORE_THREE_DOTS = set(
+    [
+        "color(srgb 0.356863 0.356863 0.4 / 0.07)",
+        "color(srgb 0.984314 0.984314 0.996078 / 0.07)",
+    ]
+)
+ALLOWED_RGB_AFTER_VALUES_THREE_DOTS = set(
+    [
+        "color(srgb 0.356863 0.356863 0.4 / 0.14)",
+        "color(srgb 0.984314 0.984314 0.996078 / 0.14)",
+    ]
+)
+
+REQUIRED_CONTEXT_MENU_ACTIONS_REGULAR_TILE = set(
+    ["Pin", "Edit", "Open in a New Window", "Open in a New Private Window", "Dismiss"]
+)
+
+REQUIRED_CONTEXT_MENU_ACTIONS_SPONSORED_TILE = set(
+    [
+        "Open in a New Window",
+        "Open in a New Private Window",
+        "Dismiss",
+        "Our sponsors & your privacy",
+    ]
+)
+
+# first value in a tuple is the index of the card, second is the status of sponsorship
+card_indices = [(3, False), (0, True)]
+
+
+@pytest.fixture()
+def add_prefs():
+    return [
+        ("browser.search.region", "US"),
+    ]
+
+
+def test_default_tile_hover_states(driver: Firefox):
+    """
+    C1533798.1: Ensure that hover states work correctly
+    """
+    # instantiate objects
+    nav = Navigation(driver).open()
+    tabs = TabBar(driver)
+
+    # open a new tab and switch to it
+    tabs.new_tab_by_button()
+    tabs.wait_for_num_tabs(2)
+    driver.switch_to.window(driver.window_handles[-1])
+    top_card = nav.get_element("sponsored-site-card")
+
+    # assert the hover state
+    assert (
+        top_card.value_of_css_property("background-color")
+        in ALLOWED_RGB_BEFORE_VALUES_CARD
+    )
+    tabs.hover_over_element(top_card)
+    assert (
+        top_card.value_of_css_property("background-color")
+        in ALLOWED_RGB_AFTER_VALUES_CARD
+    )
+
+    three_dot_menu = nav.get_element("sponsored-site-card-menu-button")
+
+    # assert the hover state again for the three dots
+    assert (
+        three_dot_menu.value_of_css_property("background-color")
+        in ALLOWED_RGB_VALUES_BEFORE_THREE_DOTS
+    )
+    tabs.hover_over_element(three_dot_menu)
+    assert (
+        three_dot_menu.value_of_css_property("background-color")
+        in ALLOWED_RGB_AFTER_VALUES_THREE_DOTS
+    )
+
+
+@pytest.mark.parametrize("index, sponsored", card_indices)
+def test_tile_context_menu_options(driver: Firefox, index: int, sponsored: bool):
+    """
+    C1533798.2: Ensure that a website has the appropriate context menu actions in the tile.
+    """
+    # initialize objects
+    nav = Navigation(driver).open()
+    tabs = TabBar(driver)
+    util = Utilities()
+
+    # open a new tab, switch to it and get the sponsored card
+    tabs.new_tab_by_button()
+    tabs.wait_for_num_tabs(2)
+    driver.switch_to.window(driver.window_handles[-1])
+    suggested_cards = nav.get_element("sponsored-site-card", multiple=True)
+
+    # pick the fourth card since it is not a sponsored tile
+    card = suggested_cards[index]
+    nav.hover_over_element(card)
+
+    # press the three dots option
+    three_dot_menu = nav.get_element(
+        "sponsored-site-card-menu-button", parent_element=card
+    )
+    three_dot_menu.click()
+
+    # get all of the context menu actions
+    context_menu_list = nav.get_element("sponsored-site-context-menu-list")
+    child_options = nav.get_all_children(context_menu_list)
+    logging.info(f"There are {len(child_options)} context options")
+
+    # match appropriate regex to extract the word of the context menu option
+    option_html_logs = [
+        option.get_attribute("innerHTML")
+        for option in child_options
+        if option.get_attribute("innerHTML") != ""
+    ]
+
+    matched_regex = util.match_regex(
+        r"<button[^>]*><span[^>]*>([^<]*)</span></button>", option_html_logs
+    )
+
+    # according to the status of sponsored, look at different context menu actions
+    set_in_use = set()
+    if sponsored:
+        set_in_use = REQUIRED_CONTEXT_MENU_ACTIONS_SPONSORED_TILE
+    else:
+        set_in_use = REQUIRED_CONTEXT_MENU_ACTIONS_REGULAR_TILE
+
+    # ensure we match each option
+    for match in matched_regex:
+        if match in set_in_use:
+            set_in_use.remove(match)
+            logging.info(f"Detected the context item: {match}")
+
+    assert (
+        len(set_in_use) == 0
+    ), "Did not find all of the required context menu actions."

tests/pocket/conftest.py

@@ -33,6 +33,10 @@ def set_prefs(add_prefs: dict):
         ("browser.newtabpage.activity-stream.feeds.system.topstories", True),
         ("browser.newtabpage.activity-stream.showSponsoredTopSites", True),
         ("browser.ping-centre.log", True),
+        (
+            "services.sync.prefs.sync.browser.newtabpage.activity-stream.showSponsoredTopSites",
+            True,
+        ),
     ]
     prefs.extend(add_prefs)
     return prefs