[NOT READY] Playwright

.github/workflows/elixir.yml

@@ -1,7 +1,7 @@
 name: Elixir CI
 
 on:
-  pull_request:
+  # pull_request:
   push:
     branches: [master, stable]
   merge_group:

.github/workflows/playwright-e2e.yml

@@ -0,0 +1,107 @@
+name: Playwright CI
+
+on:
+  pull_request:
+  push:
+    branches: [master, stable]
+  merge_group:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  CACHE_VERSION: v1
+  PERSISTENT_CACHE_DIR: cached
+  CI: "true"
+  MIX_ENV: dev
+  IP_GEOLOCATION_DB: test/priv/GeoLite2-City-Test.mmdb
+  RANDOM_SEED: "0"
+
+jobs:
+  e2e:
+    name: E2E playwright tests
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:16
+        ports:
+          - 5432:5432
+        env:
+          POSTGRES_PASSWORD: postgres
+          options: >-
+            --health-cmd pg_isready
+            --health-interval 10s
+            --health-timeout 5s
+            --health-retries 5
+      clickhouse:
+        image: clickhouse/clickhouse-server:24.8.5.115-alpine
+        ports:
+          - 8123:8123
+        env:
+          options: >-
+            --health-cmd nc -zw3 localhost 8124
+            --health-interval 10s
+            --health-timeout 5s
+            --health-retries 5
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: marocchino/tool-versions-action@v1
+        id: versions
+
+      - uses: erlef/setup-beam@v1
+        with:
+          elixir-version: ${{ steps.versions.outputs.elixir }}
+          otp-version: ${{ steps.versions.outputs.erlang }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.versions.outputs.nodejs }}
+
+      - run: sudo apt-get install faketime
+
+      - uses: actions/cache@v4
+        id: cache
+        with:
+          path: |
+            deps
+            _build
+            tracker/node_modules
+            priv/tracker/js
+            assets/node_modules
+            ~/.cache/ms-playwright
+            ${{ env.PERSISTENT_CACHE_DIR }}
+          key: playwright-${{ env.CACHE_VERSION }}-${{ github.head_ref || github.ref }}-${{ hashFiles('**/mix.lock') }}
+          restore-keys: |
+            playwright-${{ env.CACHE_VERSION }}-${{ github.head_ref || github.ref }}-
+            playwright-${{ env.CACHE_VERSION }}-refs/heads/master-
+            playwright-${{ env.CACHE_VERSION }}-
+
+      - name: Install frontend dependencies
+        run: npm ci --prefix assets
+      - name: Install Playwright Browsers
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm run playwright:install --prefix assets
+
+      - run: mix deps.get
+
+      - name: Setup and seed database
+        run: |
+          mix ecto.create
+          mix ecto.migrate
+          faketime -f "@2024-10-01 00:00:00" mix ecto.setup
+
+      - run: mix run -e "Tzdata.ReleaseUpdater.poll_for_update"
+
+      - name: Run Playwright tests
+        run: |
+          faketime -f "@2024-10-01 00:00:00" npm run playwright --prefix assets
+
+      - name: Lost Pixel
+        uses: lost-pixel/[email protected]
+        env:
+          LOST_PIXEL_API_KEY: ${{ secrets.LOST_PIXEL_API_KEY }}

.gitignore

@@ -48,6 +48,13 @@ npm-debug.log
 # test coverage directory
 /assets/coverage
 
+# Playwright assets
+/assets/playwright-tests/.auth
+/assets/playwright-tests/snapshots
+/assets/test-results/
+/assets/playwright-report/
+/assets/blob-report/
+
 # Since we are building assets from assets/,
 # we ignore priv/static. You may want to comment
 # this depending on your deployment strategy.

assets/README.md

@@ -0,0 +1,16 @@
+# Plausible frontend
+
+## Testing
+
+### 1. Jest component tests
+
+React component tests can be run via `npm run test` or `npx jest`. These tests test individual react components using
+[@testing-library/react](https://testing-library.com/)
+
+### 2. Playwright tests
+
+Playwright tests test the application end-to-end. Used to test interaction-heavy parts of Plausible like the dashboard.
+
+Locally, the best way to run these tests is to:
+1. Reset the database and re-seed: `mix ecto.reset`
+2. Run tests in UI mode: `npm run --prefix assets playwright:ui`

assets/js/dashboard/components/dropdown.tsx

@@ -21,7 +21,7 @@ export const ToggleDropdownButton = forwardRef<
     currentOption: ReactNode
     children: ReactNode
     onClick: () => void
-    dropdownContainerProps: AriaAttributes
+    dropdownContainerProps: AriaAttributes & { 'data-testid'?: string }
   }
 >(({ currentOption, children, onClick, dropdownContainerProps }, ref) => {
   return (

assets/js/dashboard/datepicker.tsx

@@ -353,7 +353,8 @@ export default function QueryPeriodPicker() {
         onClick={toggleDateMenu}
         dropdownContainerProps={{
           ['aria-controls']: 'datemenu',
-          ['aria-expanded']: menuVisible === 'datemenu'
+          ['aria-expanded']: menuVisible === 'datemenu',
+          ['data-testid']: 'date-menu-button'
         }}
       >
         {menuVisible === 'datemenu' && (

assets/js/dashboard/stats/behaviours/index.js

@@ -168,7 +168,7 @@ export default function Behaviours({ importedDataInView }) {
     }
 
     return (
-      <div className={className} onClick={setTab}>
+      <div className={className} onClick={setTab} role="button" tabIndex={0}>
         {displayName}
       </div>
     )
@@ -353,7 +353,7 @@ export default function Behaviours({ importedDataInView }) {
 
   if (mode) {
     return (
-      <div className="items-start justify-between block w-full mt-6 md:flex">
+      <div className="items-start justify-between block w-full mt-6 md:flex" data-testid="section::behaviors">
         <div className="w-full p-4 bg-white rounded shadow-xl dark:bg-gray-825">
           <div className="flex justify-between w-full">
             <div className="flex gap-x-1">

assets/js/dashboard/stats/devices/index.js

@@ -366,7 +366,7 @@ export default function Devices() {
   }
 
   return (
-    <div>
+    <div data-testid="section::devices">
       <div className="flex justify-between w-full">
         <div className="flex gap-x-1">
           <h3 className="font-bold dark:text-gray-100">Devices</h3>

assets/js/dashboard/stats/graph/visitor-graph.js

@@ -157,7 +157,7 @@ export default function VisitorGraph({ updateImportedDataInView }) {
     <div className={"relative w-full mt-2 bg-white rounded shadow-xl dark:bg-gray-825"}>
       {(topStatsLoading || graphLoading) && renderLoader()}
       <FadeIn show={!(topStatsLoading || graphLoading)}>
-        <div id="top-stats-container" className="flex flex-wrap" ref={topStatsBoundary} style={{ height: getTopStatsHeight() }}>
+        <div id="top-stats-container" className="flex flex-wrap" ref={topStatsBoundary} style={{ height: getTopStatsHeight() }} data-testid="section::top-stats">
           <TopStats
             data={topStatData}
             onMetricUpdate={onMetricUpdate}

assets/js/dashboard/stats/locations/index.js

@@ -231,7 +231,7 @@ class Locations extends React.Component {
 
 	render() {
 		return (
-			<div>
+			<div data-testid="section::locations">
 				<div className="w-full flex justify-between">
 					<div className="flex gap-x-1">
 						<h3 className="font-bold dark:text-gray-100">
@@ -257,4 +257,4 @@ function LocationsWithContext() {
 	const site = useSiteContext();
 	return <Locations site={site} query={query} />
 }
-export default LocationsWithContext
+export default LocationsWithContext

assets/js/dashboard/stats/modals/breakdown-modal.tsx

@@ -166,7 +166,8 @@ export default function BreakdownModal<TListItem extends { name: string }>({
       orderByDictionary,
       toggleSortByMetric,
       renderIcon,
-      getExternalLinkURL
+      getExternalLinkURL,
+      meta
     ]
   )
 

assets/js/dashboard/stats/more-link.js

@@ -27,6 +27,7 @@ export default function MoreLink({ linkProps, list, className, onClick }) {
           {...linkProps}
           className="leading-snug font-bold text-sm text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition tracking-wide"
           onClick={onClick}
+          data-testid="details-link"
         >
           {detailsIcon()}
           DETAILS

assets/js/dashboard/stats/pages/index.js

@@ -193,7 +193,7 @@ export default function Pages() {
   }
 
   return (
-    <div>
+    <div data-testid="section::pages">
       {/* Header Container */}
       <div className="w-full flex justify-between">
         <div className="flex gap-x-1">

assets/js/dashboard/stats/reports/list.js

@@ -367,7 +367,11 @@ export default function ListReport({
 
   return (
     <LazyLoader onVisible={onVisible}>
-      <div className="w-full" style={{ minHeight: `${MIN_HEIGHT}px` }}>
+      <div
+        className="w-full"
+        style={{ minHeight: `${MIN_HEIGHT}px` }}
+        data-testid={`list-report::${keyLabel}`}
+      >
         {state.loading && renderLoading()}
         {!state.loading && (
           <FadeIn show={!state.loading} className="h-full">

assets/js/dashboard/stats/sources/referrer-list.js

@@ -59,7 +59,7 @@ export default function Referrers({ source }) {
   }
 
   return (
-    <div className="flex flex-col flex-grow">
+    <div className="flex flex-col flex-grow" data-testid="section::sources">
       <div className="flex gap-x-1">
         <h3 className="font-bold dark:text-gray-100">Top Referrers</h3>
         <ImportedQueryUnsupportedWarning loading={loading} skipImportedReason={skipImportedReason} />

assets/js/dashboard/stats/sources/search-terms.js

@@ -121,7 +121,7 @@ export default class SearchTerms extends React.Component {
 
   render() {
     return (
-      <div>
+      <div data-testid="section::sources">
         {this.state.loading && <div className="loading mt-44 mx-auto"><div></div></div>}
         <FadeIn show={!this.state.loading} className="flex-grow">
           <LazyLoader onVisible={this.onVisible}>

assets/js/dashboard/stats/sources/source-list.js

@@ -179,7 +179,7 @@ export default function SourceList() {
 
         <Menu as="div" className="relative inline-block text-left">
           <div>
-            <Menu.Button className="inline-flex justify-between focus:outline-none">
+            <Menu.Button className="inline-flex justify-between focus:outline-none" data-testid="campaign-menu">
               <span className={currentTab.startsWith('utm_') ? activeClass : defaultClass}>{buttonText}</span>
               <ChevronDownIcon className="-mr-1 ml-1 h-4 w-4" aria-hidden="true" />
             </Menu.Button>
@@ -198,7 +198,7 @@ export default function SourceList() {
               <div className="py-1">
                 {dropdownOptions.map((option) => {
                   return (
-                    <Menu.Item key={option}>
+                    <Menu.Item key={option} name={UTM_TAGS[option].label}>
                       {({ active }) => (
                         <span
                           onClick={setTab(option)}
@@ -238,7 +238,7 @@ export default function SourceList() {
   }
 
   return (
-    <div>
+    <div data-testid="section::sources">
       {/* Header Container */}
       <div className="w-full flex justify-between">
         <div className="flex gap-x-1">