Playwright end to end tests

.gitignore

@@ -47,7 +47,10 @@ geckodriver.log
 tests/cypress/screenshots
 tests/cypress/videos
 tests/screenshots
-tests/unit/utils/md/data/output.html
+tests/unit/utils/markdown/data/output.html
+coverage/
+tests/playwright/test-results
+playwright-report
 
 # Instance files that should not be checked-in
 instance/development.py

funnel/templates/account.html.jinja2

@@ -33,11 +33,11 @@
                 <p class="mui--text-subhead mui--text-light user__box__userid">@{{ current_auth.user.username }}</p>
               {% else %}
                 <p class="mui--text-subhead mui--text-light user__box__userid">
-                  {{ faicon(icon='info-circle', icon_size='body2', baseline=true) }} <a href="{{ url_for('account_edit') }}" data-cy="add-username">{% trans %}Add username{% endtrans %} <span class="circle-icon">{{ faicon(icon='plus', icon_size='caption', baseline=false) }}</span></a>
+                  {{ faicon(icon='info-circle', icon_size='body2', baseline=true) }} <a href="{{ url_for('account_edit') }}" data-testid="add-username">{% trans %}Add username{% endtrans %} <span class="circle-icon">{{ faicon(icon='plus', icon_size='caption', baseline=false) }}</span></a>
                 </p>
               {%- endif %}
               <a href="{{ current_auth.user.absolute_url }}"
-                  data-cy="my-profile"
+                  data-testid="my-profile"
                   class="nounderline">
                 {%- trans %}Go to account{% endtrans %}
                 <span class="circle-icon">{{ faicon(icon='arrow-right', icon_size='caption', baseline=false) }}</span>
@@ -91,7 +91,7 @@
                  href="{{ url_for('account_edit') }}">{% trans %}Edit{% endtrans %}</a>
               <a class="mui-btn mui-btn--small mui-btn--flat mui-btn--accent"
                  href="{{ url_for('change_password') }}"
-                 data-cy="change-password">
+                 data-testid="change-password">
                 {% if user_has_password %}
                   {% trans %}Change password{% endtrans %}
                 {% else %}
@@ -100,7 +100,7 @@
               </a>
               <button class="mui-btn mui-btn--small mui-btn--flat mui-btn--accent"
                       type="submit"
-                      data-cy="Logout">
+                      data-testid="logout">
                 {% trans %}Logout{% endtrans %}
               </button>
             </div>
@@ -202,7 +202,7 @@
                   </button>
                 {% endif %}
                 <a class="mui-btn mui-btn--small mui-btn--flat mui-btn--accent"
-                   href="{{ url_for('add_email') }}" data-cy="add-new-email">{% trans %}Add an email address{% endtrans %}</a>
+                   href="{{ url_for('add_email') }}" data-testid="add-new-email">{% trans %}Add an email address{% endtrans %}</a>
                 <span class="loading mui--hide"></span>
               </div>
             </form>
@@ -253,7 +253,7 @@
                   </button>
                 {% endif %}
                 <a class="mui-btn mui-btn--small mui-btn--flat mui-btn--accent"
-                   href="{{ url_for('add_phone') }}" data-cy="add-new-phone">{% trans %}Add a mobile number{% endtrans %}</a>
+                   href="{{ url_for('add_phone') }}" data-testid="add-new-phone">{% trans %}Add a mobile number{% endtrans %}</a>
                 <span class="loading mui--hide"></span>
               </div>
             </form>
@@ -386,7 +386,7 @@
           </div>
           <div class="mui-divider"></div>
           <div class="card__footer">
-            <a class="mui-btn mui-btn--small mui-btn--flat mui-btn--danger" href="{{ url_for('account_delete') }}" data-cy="change-password">{% trans %}Delete this account{% endtrans %}</a>
+            <a class="mui-btn mui-btn--small mui-btn--flat mui-btn--danger" href="{{ url_for('account_delete') }}" data-testid="delete-account">{% trans %}Delete this account{% endtrans %}</a>
           </div>
         </div>
       </div>

funnel/templates/account_formlayout.html.jinja2

@@ -23,7 +23,7 @@
     <p class="alert__text">{% trans %}Cookies are required to login. Please enable cookies in your browser’s settings and reload this page{% endtrans %}</p>
   </div>
 
-  <div class="login-page-wrapper" data-cy="login-form-wrapper">
+  <div class="login-page-wrapper" data-testid="login-form-wrapper">
     <div class="login-page__box">
       <div class="login-page__back">
         <a class="js-popup-back" href="{% if current_auth.is_authenticated %}{{ url_for('account') }}{% else %}{{ url_for('index') }}{% endif %}" aria-label="{% trans %}Close{% endtrans %}">{{ faicon(icon='times', baseline=false, icon_size='title') }}</a>

funnel/templates/account_menu.html.jinja2

@@ -8,7 +8,7 @@
             {{ useravatar(current_auth.user, add_profile_link=true, size='big') }}
             <a href="{{ current_auth.user.absolute_url }}"
               class="user__box__header nounderline"
-              data-cy="profile">
+              data-testid="profile">
               <div class="user__box__header__details">
                 <p class="mui--text-title text-bold mui--text-dark zero-bottom-margin">{{ current_auth.user.fullname }}</p>
                 {% if current_auth.user.username %}
@@ -30,7 +30,7 @@
   <li>
     <a href="{{ url_for('organizations') }}"
        class="header__dropdown__item header__dropdown__item--flex mui--text-dark nounderline mui--text-subhead mui--text-light"
-       data-cy="org"><span class="profile-avatar profile-avatar--bigger margin-right">{{ faicon(icon='sitemap', icon_size='title', baseline=false, css_class="mui--text-light") }}</span>{% trans %}Organizations{% endtrans %}</a>
+       data-testid="org-page"><span class="profile-avatar profile-avatar--bigger margin-right">{{ faicon(icon='sitemap', icon_size='title', baseline=false, css_class="mui--text-light") }}</span>{% trans %}Organizations{% endtrans %}</a>
   </li>
   {%- with orglist = current_auth.user.views.organizations_as_member %}
     {%- for org in orglist %}
@@ -94,7 +94,7 @@
     <li>
       <a href="{{ url_for('account') }}"
          class="header__dropdown__item header__dropdown__item--flex mui--text-subhead mui--text-light nounderline"
-         data-cy="account"><span class="profile-avatar profile-avatar--bigger margin-right">{{ faicon(icon='cog', icon_size='subhead', baseline=false, css_class="mui--text-light") }}</span>{% trans %}Account settings{% endtrans %}</a>
+         data-testid="account"><span class="profile-avatar profile-avatar--bigger margin-right">{{ faicon(icon='cog', icon_size='subhead', baseline=false, css_class="mui--text-light") }}</span>{% trans %}Account settings{% endtrans %}</a>
     </li>
     <li>
       <a href="{{ url_for('notification_preferences') }}"
@@ -112,7 +112,7 @@
       {{ csrf_tag() }}
       <button class="mui-btn mui-btn--nostyle text-capitalize header__dropdown__item header__dropdown__item--flex mui--text-subhead mui--text-light"
               type="submit"
-              data-cy="Logout">
+              data-testid="logout">
         <span class="profile-avatar profile-avatar--bigger margin-right">{{ faicon(icon='sign-out', baseline=false) }}</span>{% trans %}Logout{% endtrans %}
       </button>
     </form>

funnel/templates/account_organizations.html.jinja2

@@ -20,7 +20,7 @@
             <li class="bottom-padding">
               <a href="{{ url_for('new_organization') }}"
                  class="flex-wrapper flex-wrapper flex-wrapper--center nounderline"
-                 data-cy="new">
+                 data-testid="new">
                 <span class="profile-avatar profile-avatar--bigger profile-avatar--new margin-right">
                   {{ faicon(icon='plus', icon_size='title', baseline=false) }}
                 </span>

funnel/templates/collaborator_list.html.jinja2

@@ -24,10 +24,10 @@
           {% endif %}
         </span>
         <div class="margin-left mui-dropdown display-inlineblock">
-          <button class="mui-btn mui-btn--nostyle mui--align-middle" data-mui-toggle="dropdown" data-cy="collaborator-menu" aria-label="{% trans %}Collaborator menu{% endtrans %}" aria-haspopup="true" aria-expanded="false">{{ faicon(icon='ellipsis-v', icon_size='title', baseline=false) }}</button>
+          <button class="mui-btn mui-btn--nostyle mui--align-middle" data-mui-toggle="dropdown" data-testid="collaborator-menu" aria-label="{% trans %}Collaborator menu{% endtrans %}" aria-haspopup="true" aria-expanded="false">{{ faicon(icon='ellipsis-v', icon_size='title', baseline=false) }}</button>
           <ul class="mui-dropdown__menu mui-dropdown__menu--right" role="menu">
-            <li><a href="{{ membership.url_for('edit') }}" rel="modal:open" aria-label="{% trans %}Add collaborator{% endtrans %}" data-ga="Edit collaborator" data-cy="edit-collaborator" role="button" aria-haspopup="true">{% trans %}Change role{% endtrans %}</a></li>
-            <li><a class="js-remove-collaborator" data-href="{{ membership.url_for('remove') }}" href="#" onclick="return false;" aria-label="{% trans %}Remove collaborator{% endtrans %}" data-ga="Remove collaborator" data-cy="remove-collaborator" role="button" aria-haspopup="true" title="{{ membership.member.pickername }}">{% trans %}Remove{% endtrans %}</a></li>
+            <li><a href="{{ membership.url_for('edit') }}" rel="modal:open" aria-label="{% trans %}Add collaborator{% endtrans %}" data-ga="Edit collaborator" data-testid="edit-collaborator" role="button" aria-haspopup="true">{% trans %}Change role{% endtrans %}</a></li>
+            <li><a class="js-remove-collaborator" data-href="{{ membership.url_for('remove') }}" href="#" onclick="return false;" aria-label="{% trans %}Remove collaborator{% endtrans %}" data-ga="Remove collaborator" data-testid="remove-collaborator" role="button" aria-haspopup="true" title="{{ membership.member.pickername }}">{% trans %}Remove{% endtrans %}</a></li>
           </ul>
         </div>
       </div>

funnel/templates/forms.html.jinja2

@@ -144,10 +144,10 @@
         {%- if name %} name="{{ name|e }}"{% else %} {% endif -%}
         class="mui-btn mui-btn--raised {% if widget_class %} {{ widget_class|e }}{% else %} mui-btn--primary{% endif -%}"
         {%- if tabindex %} tabindex="{{ tabindex }}" {% endif -%}
-        data-cy="form-submit-btn"
+        data-testid="form-submit-btn"
         >{{ value|e }}</button>
     {% endfor %}
-    {% if cancel_url %}<a href="{{ cancel_url }}" class="mui-btn mui-btn--raised mui-btn" data-cy="form-cancel-btn">{% trans %}Cancel{% endtrans %}</a>{% endif %}
+    {% if cancel_url %}<a href="{{ cancel_url }}" class="mui-btn mui-btn--raised mui-btn" data-testid="form-cancel-btn">{% trans %}Cancel{% endtrans %}</a>{% endif %}
     <span class="loading mui--hide">&nbsp;</span>
     {% if csrf_error -%}
       <div>

funnel/templates/img_upload_formlayout.html.jinja2

@@ -6,7 +6,7 @@
 <div class="modal__inner img-upload-modal">
   {% block content %}
     <div class="modal__header">
-      <a class="modal__close mui--text-dark" href="#" onclick="return false;" data-target="close modal" aria-label="{% trans %}Close{% endtrans %}" rel="modal:close" data-cy="close-modal" role="button" tabindex="0">{{ faicon(icon='times', baseline=false, icon_size='title') }}</a>
+      <a class="modal__close mui--text-dark" href="#" onclick="return false;" data-target="close modal" aria-label="{% trans %}Close{% endtrans %}" rel="modal:close" data-testid="close-modal" role="button" tabindex="0">{{ faicon(icon='times', baseline=false, icon_size='title') }}</a>
       {%- if title -%}
         <p class="mui--text-title text-bold mui--text-dark">{{ title }}</p>
       {%- endif -%}