✅ Add visual diff test for story ads system layer (#35619)

* added visual diff test and css selector override on load complete. * Added test which waits until css fully laods before making a snapshot * fixed spacing * added page load delay * cleaned up tests * cleaned up tests * cleaned up tests * cleaned up tests * increased load delay time * added waits for more story elements * added waits for more story elements * added waits for more story elements * added waits for more story elements * added waits for more story elements * added waits for more story elements * updated visuall diff to use the FAKE AD exmaple instead of the developer one * updated visual diff to use the FAKE AD exmaple instead of the developer one * updated visual diff to use the FAKE AD exmaple instead of the developer one * updated visual diff to use enable_percy_javascript in order to laod the inline javascript that loads the amp-ad badge * Claenup up tests to clarify that the ad is only testing the system layer. * Claenup up tests as broswer test in firefox is failing * Cleanup up tests as broswer test in firefox is failing * Cleanup up tests as broswer test in firefox is failing
ampproject · Aug 13, 2021 · 537bf74 · 537bf74
1 parent d487611
commit 537bf74
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 0 deletions.
diff --git a/examples/visual-tests/amp-story/amp-story-ad.html b/examples/visual-tests/amp-story/amp-story-ad.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html amp lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+    <script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
+    <title>My Story</title>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <link rel="canonical" href="helloworld.html">
+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+    <style amp-custom>
+      body {
+        font-family: 'Roboto', sans-serif;
+      }
+      amp-story-page {
+        background: white;
+      }
+      h1 {
+        font-size: 2.875em;
+        font-weight: normal;
+        line-height: 1.174;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+
+  <body>
+    <amp-story
+      title="Amp-story-doubleclick"
+      publisher="The AMP Team"
+      publisher-logo-src="https://example.com/logo/1x1.png"
+      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
+      poster-square-src="https://example.com/my-story/poster/1x1.jpg"
+      poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
+      standalone>
+
+      <amp-story-auto-ads id="i-amphtml-demo-1" development>
+        <script type="application/json">
+          {
+            "ad-attributes": {
+              "type": "fake",
+              "src": "/examples/amp-story/ads/app-install.html",
+              "a4a-conversion": true
+            }
+          }
+        </script>
+      </amp-story-auto-ads>
+
+      <amp-story-page id="cover">
+        <amp-story-grid-layer template="vertical">
+          <h1>Fake ads served locally</h1>
+          <p>This is the cover page.</p>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="two">
+        <amp-story-grid-layer template="vertical">
+          <h1>two Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="three">
+        <amp-story-grid-layer template="vertical">
+          <h1>three Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="four">
+        <amp-story-grid-layer template="vertical">
+          <h1>four Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="five">
+        <amp-story-grid-layer template="vertical">
+          <h1>five Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="six">
+        <amp-story-grid-layer template="vertical">
+          <h1>six Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="seven">
+        <amp-story-grid-layer template="vertical">
+          <h1>seven Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="eight">
+        <amp-story-grid-layer template="vertical">
+          <h1>eight Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="nine">
+        <amp-story-grid-layer template="vertical">
+          <h1>nine Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="ten">
+        <amp-story-grid-layer template="vertical">
+          <h1>ten Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="eleven">
+        <amp-story-grid-layer template="vertical">
+          <h1>eleven Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="twelve">
+        <amp-story-grid-layer template="vertical">
+          <h1>twelve Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="thirteen">
+        <amp-story-grid-layer template="vertical">
+          <h1>thirteen Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="fourteen">
+        <amp-story-grid-layer template="vertical">
+          <h1>fourteen Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="fifteen">
+        <amp-story-grid-layer template="vertical">
+          <h1>fifteen Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="sixteen">
+        <amp-story-grid-layer template="vertical">
+          <h1>sixteen Page</h1>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/examples/visual-tests/amp-story/amp-story-ad.js b/examples/visual-tests/amp-story/amp-story-ad.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+const {
+  verifySelectorsVisible,
+} = require('../../../build-system/tasks/visual-diff/helpers');
+
+module.exports = {
+  'Test story ad system layer property correctness': async (page, name) => {
+    await verifySelectorsVisible(page, name, ['.i-amphtml-story-ad-badge']);
+  },
+};
diff --git a/test/visual-diff/visual-tests b/test/visual-diff/visual-tests
@@ -249,6 +249,19 @@
       "loading_complete_delay_ms": 500,
       "enable_percy_javascript": true
     },
+    {
+      "url": "examples/visual-tests/amp-story/amp-story-ad.html",
+      "name": "AMP Story Ad System Layer",
+      "viewport": {
+        "width": 400,
+        "height": 600
+      },
+      "interactive_tests": "examples/visual-tests/amp-story/amp-story-ad.js",
+       "loading_complete_selectors": [
+        ".i-amphtml-story-ad-badge",
+        "amp-story[ad-showing]",
+      ],
+    },
     {
       // TODO(#32685, @ampproject/wg-stories): see https://percy.io/ampproject/amphtml/builds/8876280/changed/503548953
       "flaky": true,