Add Playwright test suite (Fixes mozilla#14191) (mozilla#14612)

.gitignore

@@ -57,9 +57,10 @@ tests/functional/assets
 tests/functional/driver.log
 tests/functional/results.html
 tests/unit/coverage
+tests/unit/dist/
+tests/playwright/test-results/
 Thumbs.db
 tmp/*
 venv
-tests/unit/dist/
 /custom-media
 /local-credentials/*.json

bedrock/base/templates/includes/banners/consent-banner.html

@@ -4,16 +4,16 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-<aside class="moz-consent-banner" id="moz-consent-banner" role="region" aria-label="{{ ftl('consent-banner-aria-label') }}" data-nosnippet="true">
+<aside class="moz-consent-banner" id="moz-consent-banner" role="region" aria-label="{{ ftl('consent-banner-aria-label') }}" data-nosnippet="true" data-testid="consent-banner">
   <div class="moz-consent-banner-content">
     <h2 class="moz-consent-banner-heading">{{ ftl('consent-banner-heading') }}</h2>
     <div class="moz-consent-banner-copy">
       <p>{{ ftl('consent-banner-body-v2', fallback='consent-banner-body') }}</p>
       <div class="moz-consent-banner-controls">
-        <button type="button" id="moz-consent-banner-button-accept" class="moz-consent-banner-button moz-consent-banner-button-accept">
+        <button type="button" id="moz-consent-banner-button-accept" class="moz-consent-banner-button moz-consent-banner-button-accept" data-testid="consent-banner-accept-button">
           {{ ftl('consent-banner-button-accept') }}
         </button>
-        <button type="button" id="moz-consent-banner-button-reject" class="moz-consent-banner-button moz-consent-banner-button-reject">
+        <button type="button" id="moz-consent-banner-button-reject" class="moz-consent-banner-button moz-consent-banner-button-reject" data-testid="consent-banner-reject-button">
           {{ ftl('consent-banner-button-reject') }}
         </button>
         <a href="{{ url('privacy.cookie-settings')}}">

bedrock/base/templates/includes/protocol/footer/footer.html

@@ -14,10 +14,10 @@
       </div>
       <div class="mzp-c-footer-sections">
         <section class="mzp-c-footer-section">
-          <h5 class="mzp-c-footer-heading">
+          <h5 class="mzp-c-footer-heading" data-testid="footer-heading-company">
             {{ ftl('footer-company') }}
           </h5>
-          <ul class="mzp-c-footer-list">
+          <ul class="mzp-c-footer-list" data-testid="footer-list-company">
             <li><a href="{{ url('mozorg.about.manifesto') }}" data-link-type="footer" data-link-text="Mozilla Manifesto">{{ ftl('footer-mozilla-manifesto') }}</a></li>
             <li><a href="https://blog.mozilla.org/category/mozilla/news/?{{ utm_params }}&utm_content=company" data-link-type="footer" data-link-text="Press Center">{{ ftl('footer-press-center') }}</a></li>
             <li><a href="https://blog.mozilla.org/?{{ utm_params }}&utm_content=company" data-link-type="footer" data-link-text="Mozilla Blog">{{ ftl('footer-mozilla-blog', fallback='footer-corporate-blog') }}</a></li>
@@ -41,31 +41,31 @@ <h5 class="mzp-c-footer-heading">
         </section>
 
         <section class="mzp-c-footer-section">
-          <h5 class="mzp-c-footer-heading">
+          <h5 class="mzp-c-footer-heading" data-testid="footer-heading-resources">
             {{ ftl('footer-resources') }}
           </h5>
-          <ul class="mzp-c-footer-list">
+          <ul class="mzp-c-footer-list" data-testid="footer-list-resources">
             <li><a href="{{ url('privacy') }}" data-link-type="footer" data-link-text="Privacy Hub">{{ ftl('footer-privacy-hub', fallback='footer-privacy') }}</a></li>
             <li><a href="https://mozilla.design/?{{ utm_params }}&utm_content=resources" data-link-type="footer" data-link-text="Brand Standards">{{ ftl('footer-brand-standards') }}</a></li>
           </ul>
         </section>
 
         <section class="mzp-c-footer-section">
-          <h5 class="mzp-c-footer-heading">
+          <h5 class="mzp-c-footer-heading" data-testid="footer-heading-support">
             {{ ftl('footer-support') }}
           </h5>
-          <ul class="mzp-c-footer-list">
+          <ul class="mzp-c-footer-list" data-testid="footer-list-support">
             <li><a href="https://support.mozilla.org/?{{ utm_params }}&utm_content=support" data-link-type="footer" data-link-text="Product Help">{{ ftl('footer-product-help', fallback='footer-support') }}</a></li>
             <li><a href="https://bugzilla.mozilla.org/?{{ utm_params }}&utm_content=support" data-link-type="footer" data-link-text="File a Bug">{{ ftl('footer-file-a-bug') }}</a></li>
             <li><a href="https://pontoon.mozilla.org/?{{ utm_params }}&utm_content=support" data-link-type="footer" data-link-text="Localise Mozilla">{{ ftl('footer-localize-mozilla') }}</a></li>
           </ul>
         </section>
 
         <section class="mzp-c-footer-section">
-          <h5 class="mzp-c-footer-heading">
+          <h5 class="mzp-c-footer-heading" data-testid="footer-heading-developers">
             {{ ftl('footer-developers') }}
           </h5>
-          <ul class="mzp-c-footer-list">
+          <ul class="mzp-c-footer-list" data-testid="footer-list-developers">
             <li><a href="{{ url('firefox.developer.index') }}" data-link-type="footer" data-link-text="Firefox Developer Edition">{{ ftl('footer-developer-edition') }}</a></li>
             <li><a href="{{ url('firefox.channel.desktop') }}#beta" data-link-type="footer" data-link-text="Firefox Beta">{{ ftl('footer-beta') }}</a></li>
             <li><a href="{{ url('firefox.channel.android') }}#beta" data-link-type="footer" data-link-text="Firefox Beta for Android">{{ ftl('footer-beta-for-android') }}</a></li>

bedrock/base/templates/includes/protocol/lang-switcher.html

@@ -8,7 +8,7 @@
   <form id="lang_form" class="mzp-c-language-switcher" method="get" action="#">
     <a class="mzp-c-language-switcher-link" href="{{ url('mozorg.locales') }}">{{ ftl('footer-language') }}</a>
     <label for="page-language-select">{{ ftl('footer-language') }}</label>
-    <select id="page-language-select" class="mzp-js-language-switcher-select" name="lang" dir="ltr">
+    <select id="page-language-select" class="mzp-js-language-switcher-select" name="lang" dir="ltr" data-testid="footer-language-select">
       {% for code, label in translations|dictsort -%}
         {# Don't escape the label as it may include entity references
         # like "Português (do&nbsp;Brasil)" (Bug 861149) #}

bedrock/base/templates/includes/protocol/navigation/menus/firefox.html

@@ -7,15 +7,15 @@
 {% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nav&utm_content=firefox' %}
 
 <li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
-  <a class="c-menu-title" href="{{ url('firefox') }}" aria-haspopup="true" aria-controls="c-menu-panel-firefox">{{ ftl('navigation-v2-firefox-browsers') }}</a>
+  <a class="c-menu-title" href="{{ url('firefox') }}" aria-haspopup="true" aria-controls="c-menu-panel-firefox" data-testid="navigation-link-firefox">{{ ftl('navigation-v2-firefox-browsers') }}</a>
   <div class="c-menu-panel" id="c-menu-panel-firefox">
-    <div class="c-menu-panel-container">
+    <div class="c-menu-panel-container" data-testid="navigation-menu-firefox">
       <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-firefox">{{ ftl('navigation-v2-close-firefox-browsers-menu') }}</button>
       <div class="c-menu-panel-content">
         <ul class="mzp-l-rows-three">
           <li>
             <section class="c-menu-item mzp-has-icon">
-              <a class="c-menu-item-link" href="{{ url('firefox.new') }}" data-link-text="Firefox Desktop Browser" data-link-type="nav" data-link-position="topnav" data-link-group="firefox">
+              <a class="c-menu-item-link" href="{{ url('firefox.new') }}" data-link-text="Firefox Desktop Browser" data-link-type="nav" data-link-position="topnav" data-link-group="firefox" data-testid="navigation-menu-link-firefox-desktop">
                 <img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
                 <h4 class="c-menu-item-title">{{ ftl('navigation-v2-firefox-for-desktop', fallback='navigation-firefox-browser-for-desktop') }}</h4>
                 <p class="c-menu-item-desc">{{ ftl('navigation-v2-get-the-not-for-profit-backed', fallback='navigation-get-the-browser-that-respects') }}</p>

bedrock/base/templates/includes/protocol/navigation/menus/innovation.html

@@ -7,8 +7,8 @@
 {% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nav&utm_content=innovation' %}
 
 <li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
-  <a class="c-menu-title" href="https://future.mozilla.org/?{{ utm_params }}" aria-haspopup="true" aria-controls="c-menu-panel-innovation">{{ ftl('navigation-v2-innovation') }}</a>
-  <div class="c-menu-panel" id="c-menu-panel-innovation">
+  <a class="c-menu-title" href="https://future.mozilla.org/?{{ utm_params }}" aria-haspopup="true" aria-controls="c-menu-panel-innovation" data-testid="navigation-link-innovation">{{ ftl('navigation-v2-innovation') }}</a>
+  <div class="c-menu-panel" id="c-menu-panel-innovation" data-testid="navigation-menu-innovation">
     <div class="c-menu-panel-container">
       <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-innovation">{{ ftl('navigation-v2-close-innovation-menu') }}</button>
       <div class="c-menu-panel-content">

bedrock/base/templates/includes/protocol/navigation/menus/products.html

@@ -7,8 +7,8 @@
 {% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nav&utm_content=products' %}
 
 <li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
-  <a class="c-menu-title" href="{{ url('products.landing') }}" aria-haspopup="true" aria-controls="c-menu-panel-products">{{ ftl('navigation-v2-products') }}</a>
-  <div class="c-menu-panel" id="c-menu-panel-products">
+  <a class="c-menu-title" href="{{ url('products.landing') }}" aria-haspopup="true" aria-controls="c-menu-panel-products" data-testid="navigation-link-products">{{ ftl('navigation-v2-products') }}</a>
+  <div class="c-menu-panel" id="c-menu-panel-products" data-testid="navigation-menu-products">
     <div class="c-menu-panel-container">
       <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-products">{{ ftl('navigation-v2-close-products-menu') }}</button>
       <div class="c-menu-panel-content">

bedrock/base/templates/includes/protocol/navigation/menus/whoweare.html

@@ -7,8 +7,8 @@
 {% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nav&utm_content=who-we-are' %}
 
 <li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
-  <a class="c-menu-title" href="{{ url('mozorg.about.index') }}" aria-haspopup="true" aria-controls="c-menu-panel-about">{{ ftl('navigation-v2-who-we-are', fallback='navigation-about') }}</a>
-  <div class="c-menu-panel" id="c-menu-panel-about">
+  <a class="c-menu-title" href="{{ url('mozorg.about.index') }}" aria-haspopup="true" aria-controls="c-menu-panel-about" data-testid="navigation-link-who-we-are">{{ ftl('navigation-v2-who-we-are', fallback='navigation-about') }}</a>
+  <div class="c-menu-panel" id="c-menu-panel-about" data-testid="navigation-menu-who-we-are">
     <div class="c-menu-panel-container">
       <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-about">{{ ftl('navigation-v2-close-who-we-are-menu', fallback='navigation-close-about-menu') }}</button>
       <div class="c-menu-panel-content">

bedrock/base/templates/includes/protocol/navigation/navigation.html

@@ -16,14 +16,14 @@
 <div class="c-navigation top-header-navigation mzp-is-sticky">
   <div class="c-navigation-l-content">
     <div class="c-navigation-container">
-      <button class="c-navigation-menu-button" type="button" aria-controls="c-navigation-items">{{ ftl('navigation-v2-menu') }}</button>
+      <button class="c-navigation-menu-button" type="button" aria-controls="c-navigation-items" data-testid="navigation-menu-button">{{ ftl('navigation-v2-menu') }}</button>
       <div class="c-navigation-logo">
         <a href="{{ url('mozorg.home') }}" data-link-text="mozilla home icon" data-link-type="nav">
           <img class="c-navigation-logo-image" src="{{ static('protocol/img/logos/mozilla/logo-word-hor.svg') }}" alt="{{ logo_alt }}" width="112" height="32">
         </a>
       </div>
 
-      <div class="c-navigation-items" id="c-navigation-items">
+      <div class="c-navigation-items" id="c-navigation-items" data-testid="navigation-menu-items">
         {% include 'includes/protocol/navigation/nav-cta.html' %}
         <div class="c-navigation-menu">
           <nav class="c-menu mzp-is-basic">

bedrock/base/templates/macros.html

@@ -68,7 +68,7 @@
 
 {# Docs: https://bedrock.readthedocs.io/en/latest/firefox-accounts.html#signup-form #}
 {% macro fxa_email_form(entrypoint, entrypoint_experiment, entrypoint_variation, context=None, utm_campaign=None, utm_content=None, utm_term=None, style=None, class_name='fxa-email-form', form_title=None, intro_text=none, button_text=None, button_class='mzp-c-button mzp-t-product') -%}
-  <form action="{{ settings.FXA_ENDPOINT }}" id="fxa-email-form" class="mzp-c-form {{ class_name }}">
+  <form action="{{ settings.FXA_ENDPOINT }}" id="fxa-email-form" class="mzp-c-form {{ class_name }}" data-test-id="fxa-form">
     <input type="hidden" name="action" value="email">
     <input type="hidden" name="entrypoint" value="{{ entrypoint }}" id="fxa-email-form-entrypoint">
     <input type="hidden" name="form_type" value="email">
@@ -125,7 +125,7 @@ <h2 class="mzp-c-form-title">{{ form_title }}</h2>
     <div class="fxa-email-field-container">
       <div class="mzp-c-field mzp-l-stretch">
         <label class="mzp-c-field-label" for="fxa-email-field">{{ ftl('fxa-form-email-address') }}</label>
-        <input type="email" name="email" id="fxa-email-field" class="mzp-c-field-control" placeholder="user@example.com" required>
+        <input type="email" name="email" id="fxa-email-field" class="mzp-c-field-control" placeholder="user@example.com" required data-testid="fxa-form-email-field">
       </div>
 
       <div class="mzp-c-button-container mzp-l-stretch">
@@ -136,6 +136,7 @@ <h2 class="mzp-c-form-title">{{ form_title }}</h2>
           data-cta-type="fxa-sync"
           data-cta-text="Register"
           data-cta-position="primary"
+          data-testid="fxa-form-submit-button"
         >
         {% if button_text %}
           {{ button_text }}

bedrock/base/templates/product-all-unified-macros.html

@@ -5,7 +5,7 @@
 #}
 
 {% macro select_product_list(products, disabled=False) %}
- <select id="select-product" class="c-selection-input" aria-controls="download-info"{% if disabled %} disabled{% endif %}>
+ <select id="select-product" class="c-selection-input" aria-controls="download-info"{% if disabled %} disabled{% endif %} data-testid="firefox-all-product-select">
   {% for p_name, p_label in products %}
     <option value="{{ p_name }}">{{ p_label }}</option>
   {% endfor %}
@@ -15,7 +15,7 @@
 {% macro select_version_list(id, version, disabled=False) %}
   {% set version_select_id = 'select_' ~ id ~ '_version' %}
   <label for="{{ version_select_id }}" class="c-selection-label">{{ ftl('firefox-all-which-version') }}</label>
-  <select id="{{ version_select_id }}" class="c-selection-input" aria-controls="download-info"{% if disabled %} disabled{% endif %}>
+  <select id="{{ version_select_id }}" class="c-selection-input" aria-controls="download-info"{% if disabled %} disabled{% endif %} data-testid="firefox-all-version-select ({{ id }})">
     {# ESR can have two versions available. ESR Latest should always come first in the dropdown. #}
     {% if id == 'desktop_esr_next' %}
       <option value="desktop_esr">{{ desktop_esr_latest_version }}</option>
@@ -48,7 +48,7 @@
   <a href="#installer-help" class="c-button-help icon-installer-help" title="{{ ftl('firefox-all-learn-about-installers')}}">
     {{ ftl('firefox-all-get-help') }}
   </a>
-  <select id="{{ id }}" class="c-selection-input" aria-controls="download-info"{% if disabled %} disabled{% endif %}>
+  <select id="{{ id }}" class="c-selection-input" aria-controls="download-info"{% if disabled %} disabled{% endif %} data-testid="firefox-all-platform-select ({{ id }})">
     {% for p_name, p_label in platforms %}
       <option value="{{ p_name }}">{{ p_label }}</option>
     {% endfor %}
@@ -57,7 +57,7 @@
 
 {% macro select_language_list(id, builds, disabled=False) %}
   <label for="{{ id }}" class="c-selection-label">{{ ftl('firefox-all-select-your-preferred-language') }}</label>
-  <select id="{{ id }}" class="c-selection-input" aria-controls="download-info"{% if disabled %} disabled{% endif %}>
+  <select id="{{ id }}" class="c-selection-input" aria-controls="download-info"{% if disabled %} disabled{% endif %} data-testid="firefox-all-language-select ({{ id }})">
     {% for build in builds %}
       <option value="{{ build.locale }}"{% if build.locale == 'en-US' %} selected{% endif%}>
       {%- if build.name_native and build.name_native != build.name_en -%}

bedrock/firefox/templates/firefox/all-unified.html

@@ -154,29 +154,55 @@ <h1 class="c-intro-heading">{{ ftl('firefox-all-choose-which-firefox') }}</h1>
             {{ ftl('firefox-all-sorry-we-couldnt-find') }}
           </p>
 
-          <a href="#all-downloads" id="download-button-primary" class="mzp-c-button mzp-t-product c-download-button" data-link-type="download" data-download-location="primary cta">
+          <a href="#all-downloads" id="download-button-primary" class="mzp-c-button mzp-t-product c-download-button" data-link-type="download" data-download-location="primary cta" data-testid="firefox-all-download-button">
             {{ ftl('download-button-download-now') }}
           </a>
 
           <div id="download-android-primary" data-product="android_release" class="c-download-button">
             <ul class="c-download-list">
-              <li>{{ google_play_button(href=android_url, id='playStoreLink-release') }}</li>
+              <li>
+                {{ google_play_button(
+                  href=android_url,
+                  id='playStoreLink-release',
+                  extra_data_attributes={
+                    'testid': 'firefox-all-android-download-button'
+                  }
+                ) }}
+              </li>
               <li><a href="{{ url('firefox.browsers.mobile.get-app') }}" class="c-get-app" data-cta-type="link" data-cta-text="Get It Now" data-cta-position="banner">{{ ftl('firefox-all-product-send-link') }}</a></li>
             </ul>
           </div>
 
           <div id="download-android-beta-primary" data-product="android_beta" class="c-download-button">
-            {{ google_play_button(href=android_beta_url, id='playStoreLink-beta') }}
+            {{ google_play_button(
+              href=android_beta_url,
+              id='playStoreLink-beta',
+              extra_data_attributes={
+                'testid': 'firefox-all-android-beta-download-button'
+              }
+            ) }}
           </div>
 
           <div id="download-android-nightly-primary" data-product="android_nightly" class="c-download-button">
-            {{ google_play_button(href=android_nightly_url, id='playStoreLink-nightly') }}
+            {{ google_play_button(
+              href=android_nightly_url,
+              id='playStoreLink-nightly',
+              extra_data_attributes={
+                'testid': 'firefox-all-android-nightly-download-button'
+              }
+            ) }}
           </div>
 
           <div id="download-ios-primary" data-product="ios_release" class="c-download-button">
             <ul class="c-download-list">
               <li>
-                {{ apple_app_store_button(href=ios_url, id='appStoreLink-ios') }}
+                {{ apple_app_store_button(
+                  href=ios_url,
+                  id='appStoreLink-ios',
+                  extra_data_attributes={
+                    'testid': 'firefox-all-ios-download-button'
+                  }
+                ) }}
               </li>
               <li><a href="{{ url('firefox.browsers.mobile.get-app') }}" class="c-get-app" data-cta-type="link" data-cta-text="Get It Now" data-cta-position="primary">{{ ftl('firefox-all-product-send-link') }}</a></li>
             </ul>