make build

DamianAdamczewski · Sep 12, 2023 · 7e8940b · 7e8940b
commit 7e8940b
Show file tree

Hide file tree

Showing 49 changed files with 6,356 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Moyo header</title><link rel="stylesheet" href="style.d0c3ecc7.css"></head><body> <main class="main"> <a href="#home"> <img src="logo.6c938e44.png" alt="logo moyo"> </a> </main> <header class="header"> <nav class="nav"> <ul class="nav__list"> <li class="nav__item"> <a href="#apple" class="is-active nav__link"> Apple </a> </li> <li class="nav__item"> <a href="#samsung" class="nav__link"> Samsung </a> </li> <li class="nav__item"> <a href="#smartphones" class="nav__link"> Smartphones </a> </li> <li class="nav__item"> <a href="#laptops&computers" class="nav__link" data-qa="hover"> Laptops & Computers </a> </li> <li class="nav__item"> <a href="#gadgets" class="nav__link"> Gadgets </a> </li> <li class="nav__item"> <a href="#tablets" class="nav__link"> Tablets </a> </li> <li class="nav__item"> <a href="#photo" class="nav__link"> Photo </a> </li> <li class="nav__item"> <a href="#video" class="nav__link"> Video </a> </li> </ul> </nav> </header> </body></html>
diff --git a/logo.6c938e44.png b/logo.6c938e44.png
diff --git a/report/bitmaps_reference/Header_tag_1024px.png b/report/bitmaps_reference/Header_tag_1024px.png
diff --git a/report/bitmaps_reference/Header_tag_1200px.png b/report/bitmaps_reference/Header_tag_1200px.png
diff --git a/report/bitmaps_reference/Link_with_class_is-active_1024px.png b/report/bitmaps_reference/Link_with_class_is-active_1024px.png
diff --git a/report/bitmaps_reference/Link_with_class_is-active_1200px.png b/report/bitmaps_reference/Link_with_class_is-active_1200px.png
diff --git a/report/bitmaps_reference/Link_with_data-qa_hover_1024px.png b/report/bitmaps_reference/Link_with_data-qa_hover_1024px.png
diff --git a/report/bitmaps_reference/Link_with_data-qa_hover_1200px.png b/report/bitmaps_reference/Link_with_data-qa_hover_1200px.png
diff --git a/report/bitmaps_reference/Nav_tag_1024px.png b/report/bitmaps_reference/Nav_tag_1024px.png
diff --git a/report/bitmaps_reference/Nav_tag_1200px.png b/report/bitmaps_reference/Nav_tag_1200px.png
diff --git a/report/bitmaps_test/20230912-092527/Header_tag_1024px.png b/report/bitmaps_test/20230912-092527/Header_tag_1024px.png
diff --git a/report/bitmaps_test/20230912-092527/Header_tag_1200px.png b/report/bitmaps_test/20230912-092527/Header_tag_1200px.png
diff --git a/report/bitmaps_test/20230912-092527/Link_with_class_is-active_1024px.png b/report/bitmaps_test/20230912-092527/Link_with_class_is-active_1024px.png
diff --git a/report/bitmaps_test/20230912-092527/Link_with_class_is-active_1200px.png b/report/bitmaps_test/20230912-092527/Link_with_class_is-active_1200px.png
diff --git a/report/bitmaps_test/20230912-092527/Link_with_data-qa_hover_1024px.png b/report/bitmaps_test/20230912-092527/Link_with_data-qa_hover_1024px.png
diff --git a/report/bitmaps_test/20230912-092527/Link_with_data-qa_hover_1200px.png b/report/bitmaps_test/20230912-092527/Link_with_data-qa_hover_1200px.png
diff --git a/report/bitmaps_test/20230912-092527/Nav_tag_1024px.png b/report/bitmaps_test/20230912-092527/Nav_tag_1024px.png
diff --git a/report/bitmaps_test/20230912-092527/Nav_tag_1200px.png b/report/bitmaps_test/20230912-092527/Nav_tag_1200px.png
diff --git a/report/bitmaps_test/20230912-092527/failed_diff_Header_tag_1024px.png b/report/bitmaps_test/20230912-092527/failed_diff_Header_tag_1024px.png
diff --git a/report/bitmaps_test/20230912-092527/failed_diff_Header_tag_1200px.png b/report/bitmaps_test/20230912-092527/failed_diff_Header_tag_1200px.png
diff --git a/...t/bitmaps_test/20230912-092527/failed_diff_Link_with_class_is-active_1024px.png b/...t/bitmaps_test/20230912-092527/failed_diff_Link_with_class_is-active_1024px.png
diff --git a/...t/bitmaps_test/20230912-092527/failed_diff_Link_with_class_is-active_1200px.png b/...t/bitmaps_test/20230912-092527/failed_diff_Link_with_class_is-active_1200px.png
diff --git a/report/bitmaps_test/20230912-092527/failed_diff_Link_with_data-qa_hover_1024px.png b/report/bitmaps_test/20230912-092527/failed_diff_Link_with_data-qa_hover_1024px.png
diff --git a/report/bitmaps_test/20230912-092527/failed_diff_Link_with_data-qa_hover_1200px.png b/report/bitmaps_test/20230912-092527/failed_diff_Link_with_data-qa_hover_1200px.png
diff --git a/report/bitmaps_test/20230912-092527/failed_diff_Nav_tag_1024px.png b/report/bitmaps_test/20230912-092527/failed_diff_Nav_tag_1024px.png
diff --git a/report/bitmaps_test/20230912-092527/failed_diff_Nav_tag_1200px.png b/report/bitmaps_test/20230912-092527/failed_diff_Nav_tag_1200px.png
diff --git a/report/bitmaps_test/20230912-092527/report.json b/report/bitmaps_test/20230912-092527/report.json
@@ -0,0 +1,213 @@
+{
+  "testSuite": "BackstopJS",
+  "tests": [
+    {
+      "pair": {
+        "reference": "..\\bitmaps_reference\\Header_tag_1024px.png",
+        "test": "..\\bitmaps_test\\20230912-092527\\Header_tag_1024px.png",
+        "selector": "header",
+        "fileName": "Header_tag_1024px.png",
+        "label": "Header tag",
+        "requireSameDimensions": false,
+        "misMatchThreshold": 1,
+        "url": "http://localhost:3001/index.html",
+        "referenceUrl": "https://mate-academy.github.io/layout_solutions/moyo-header/",
+        "expect": 0,
+        "viewportLabel": "1024px",
+        "diff": {
+          "isSameDimensions": false,
+          "dimensionDifference": {
+            "width": 328,
+            "height": -50
+          },
+          "misMatchPercentage": "6.17",
+          "analysisTime": 59
+        },
+        "diffImage": "..\\bitmaps_test\\20230912-092527\\failed_diff_Header_tag_1024px.png"
+      },
+      "status": "fail"
+    },
+    {
+      "pair": {
+        "reference": "..\\bitmaps_reference\\Header_tag_1200px.png",
+        "test": "..\\bitmaps_test\\20230912-092527\\Header_tag_1200px.png",
+        "selector": "header",
+        "fileName": "Header_tag_1200px.png",
+        "label": "Header tag",
+        "requireSameDimensions": false,
+        "misMatchThreshold": 1,
+        "url": "http://localhost:3001/index.html",
+        "referenceUrl": "https://mate-academy.github.io/layout_solutions/moyo-header/",
+        "expect": 0,
+        "viewportLabel": "1200px",
+        "diff": {
+          "isSameDimensions": false,
+          "dimensionDifference": {
+            "width": 504,
+            "height": -50
+          },
+          "misMatchPercentage": "4.66",
+          "analysisTime": 64
+        },
+        "diffImage": "..\\bitmaps_test\\20230912-092527\\failed_diff_Header_tag_1200px.png"
+      },
+      "status": "fail"
+    },
+    {
+      "pair": {
+        "reference": "..\\bitmaps_reference\\Nav_tag_1024px.png",
+        "test": "..\\bitmaps_test\\20230912-092527\\Nav_tag_1024px.png",
+        "selector": "nav",
+        "fileName": "Nav_tag_1024px.png",
+        "label": "Nav tag",
+        "requireSameDimensions": false,
+        "misMatchThreshold": 1,
+        "url": "http://localhost:3001/index.html",
+        "referenceUrl": "https://mate-academy.github.io/layout_solutions/moyo-header/",
+        "expect": 0,
+        "viewportLabel": "1024px",
+        "diff": {
+          "isSameDimensions": false,
+          "dimensionDifference": {
+            "width": -60,
+            "height": -18
+          },
+          "misMatchPercentage": "10.34",
+          "analysisTime": 45
+        },
+        "diffImage": "..\\bitmaps_test\\20230912-092527\\failed_diff_Nav_tag_1024px.png"
+      },
+      "status": "fail"
+    },
+    {
+      "pair": {
+        "reference": "..\\bitmaps_reference\\Nav_tag_1200px.png",
+        "test": "..\\bitmaps_test\\20230912-092527\\Nav_tag_1200px.png",
+        "selector": "nav",
+        "fileName": "Nav_tag_1200px.png",
+        "label": "Nav tag",
+        "requireSameDimensions": false,
+        "misMatchThreshold": 1,
+        "url": "http://localhost:3001/index.html",
+        "referenceUrl": "https://mate-academy.github.io/layout_solutions/moyo-header/",
+        "expect": 0,
+        "viewportLabel": "1200px",
+        "diff": {
+          "isSameDimensions": false,
+          "dimensionDifference": {
+            "width": -60,
+            "height": -18
+          },
+          "misMatchPercentage": "10.34",
+          "analysisTime": 57
+        },
+        "diffImage": "..\\bitmaps_test\\20230912-092527\\failed_diff_Nav_tag_1200px.png"
+      },
+      "status": "fail"
+    },
+    {
+      "pair": {
+        "reference": "..\\bitmaps_reference\\Link_with_data-qa_hover_1024px.png",
+        "test": "..\\bitmaps_test\\20230912-092527\\Link_with_data-qa_hover_1024px.png",
+        "selector": "[data-qa=\"hover\"]",
+        "fileName": "Link_with_data-qa_hover_1024px.png",
+        "label": "Link with data-qa_hover",
+        "requireSameDimensions": false,
+        "misMatchThreshold": 1,
+        "url": "http://localhost:3001/index.html",
+        "referenceUrl": "https://mate-academy.github.io/layout_solutions/moyo-header/",
+        "expect": 0,
+        "viewportLabel": "1024px",
+        "diff": {
+          "isSameDimensions": false,
+          "dimensionDifference": {
+            "width": 0,
+            "height": -2
+          },
+          "misMatchPercentage": "8.56",
+          "analysisTime": 16
+        },
+        "diffImage": "..\\bitmaps_test\\20230912-092527\\failed_diff_Link_with_data-qa_hover_1024px.png"
+      },
+      "status": "fail"
+    },
+    {
+      "pair": {
+        "reference": "..\\bitmaps_reference\\Link_with_data-qa_hover_1200px.png",
+        "test": "..\\bitmaps_test\\20230912-092527\\Link_with_data-qa_hover_1200px.png",
+        "selector": "[data-qa=\"hover\"]",
+        "fileName": "Link_with_data-qa_hover_1200px.png",
+        "label": "Link with data-qa_hover",
+        "requireSameDimensions": false,
+        "misMatchThreshold": 1,
+        "url": "http://localhost:3001/index.html",
+        "referenceUrl": "https://mate-academy.github.io/layout_solutions/moyo-header/",
+        "expect": 0,
+        "viewportLabel": "1200px",
+        "diff": {
+          "isSameDimensions": false,
+          "dimensionDifference": {
+            "width": 0,
+            "height": -2
+          },
+          "misMatchPercentage": "8.56",
+          "analysisTime": 16
+        },
+        "diffImage": "..\\bitmaps_test\\20230912-092527\\failed_diff_Link_with_data-qa_hover_1200px.png"
+      },
+      "status": "fail"
+    },
+    {
+      "pair": {
+        "reference": "..\\bitmaps_reference\\Link_with_class_is-active_1024px.png",
+        "test": "..\\bitmaps_test\\20230912-092527\\Link_with_class_is-active_1024px.png",
+        "selector": "a.is-active",
+        "fileName": "Link_with_class_is-active_1024px.png",
+        "label": "Link with class_is-active",
+        "requireSameDimensions": false,
+        "misMatchThreshold": 1,
+        "url": "http://localhost:3001/index.html",
+        "referenceUrl": "https://mate-academy.github.io/layout_solutions/moyo-header/",
+        "expect": 0,
+        "viewportLabel": "1024px",
+        "diff": {
+          "isSameDimensions": false,
+          "dimensionDifference": {
+            "width": 0,
+            "height": 2
+          },
+          "misMatchPercentage": "11.98",
+          "analysisTime": 8
+        },
+        "diffImage": "..\\bitmaps_test\\20230912-092527\\failed_diff_Link_with_class_is-active_1024px.png"
+      },
+      "status": "fail"
+    },
+    {
+      "pair": {
+        "reference": "..\\bitmaps_reference\\Link_with_class_is-active_1200px.png",
+        "test": "..\\bitmaps_test\\20230912-092527\\Link_with_class_is-active_1200px.png",
+        "selector": "a.is-active",
+        "fileName": "Link_with_class_is-active_1200px.png",
+        "label": "Link with class_is-active",
+        "requireSameDimensions": false,
+        "misMatchThreshold": 1,
+        "url": "http://localhost:3001/index.html",
+        "referenceUrl": "https://mate-academy.github.io/layout_solutions/moyo-header/",
+        "expect": 0,
+        "viewportLabel": "1200px",
+        "diff": {
+          "isSameDimensions": false,
+          "dimensionDifference": {
+            "width": 0,
+            "height": 2
+          },
+          "misMatchPercentage": "11.98",
+          "analysisTime": 10
+        },
+        "diffImage": "..\\bitmaps_test\\20230912-092527\\failed_diff_Link_with_class_is-active_1200px.png"
+      },
+      "status": "fail"
+    }
+  ]
+}
diff --git a/report/engine_scripts/cookies.json b/report/engine_scripts/cookies.json
@@ -0,0 +1,14 @@
+[
+  {
+    "domain": ".www.yourdomain.com",
+    "path": "/",
+    "name": "yourCookieName",
+    "value": "yourCookieValue",
+    "expirationDate": 1798790400,
+    "hostOnly": false,
+    "httpOnly": false,
+    "secure": false,
+    "session": false,
+    "sameSite": "no_restriction"
+  }
+]
diff --git a/report/engine_scripts/imageStub.jpg b/report/engine_scripts/imageStub.jpg
diff --git a/report/engine_scripts/puppet/clickAndHoverHelper.js b/report/engine_scripts/puppet/clickAndHoverHelper.js
@@ -0,0 +1,39 @@
+module.exports = async (page, scenario) => {
+  var hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+  var clickSelector = scenario.clickSelectors || scenario.clickSelector;
+  var keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+  var scrollToSelector = scenario.scrollToSelector;
+  var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+  if (keyPressSelector) {
+    for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+      await page.waitFor(keyPressSelectorItem.selector);
+      await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+    }
+  }
+
+  if (hoverSelector) {
+    for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+      await page.waitFor(hoverSelectorIndex);
+      await page.hover(hoverSelectorIndex);
+    }
+  }
+
+  if (clickSelector) {
+    for (const clickSelectorIndex of [].concat(clickSelector)) {
+      await page.waitFor(clickSelectorIndex);
+      await page.click(clickSelectorIndex);
+    }
+  }
+
+  if (postInteractionWait) {
+    await page.waitFor(postInteractionWait);
+  }
+
+  if (scrollToSelector) {
+    await page.waitFor(scrollToSelector);
+    await page.evaluate(scrollToSelector => {
+      document.querySelector(scrollToSelector).scrollIntoView();
+    }, scrollToSelector);
+  }
+};
diff --git a/report/engine_scripts/puppet/loadCookies.js b/report/engine_scripts/puppet/loadCookies.js
@@ -0,0 +1,29 @@
+var fs = require('fs');
+
+module.exports = async (page, scenario) => {
+  var cookies = [];
+  var cookiePath = scenario.cookiePath;
+
+  // READ COOKIES FROM FILE IF EXISTS
+  if (fs.existsSync(cookiePath)) {
+    cookies = JSON.parse(fs.readFileSync(cookiePath));
+  }
+
+  // MUNGE COOKIE DOMAIN
+  cookies = cookies.map(cookie => {
+    cookie.url = 'https://' + cookie.domain;
+    delete cookie.domain;
+    return cookie;
+  });
+
+  // SET COOKIES
+  const setCookies = async () => {
+    return Promise.all(
+      cookies.map(async (cookie) => {
+        await page.setCookie(cookie);
+      })
+    );
+  };
+  await setCookies();
+  console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
+};
diff --git a/report/engine_scripts/puppet/onBefore.js b/report/engine_scripts/puppet/onBefore.js
@@ -0,0 +1,3 @@
+module.exports = async (page, scenario, vp) => {
+  await require('./loadCookies')(page, scenario);
+};
diff --git a/report/engine_scripts/puppet/onReady.js b/report/engine_scripts/puppet/onReady.js
@@ -0,0 +1,6 @@
+module.exports = async (page, scenario, vp) => {
+  console.log('SCENARIO > ' + scenario.label);
+  await require('./clickAndHoverHelper')(page, scenario);
+
+  // add more ready handlers here...
+};
diff --git a/report/html_report/a96f14595379b7c348d66e115ec65a93.png b/report/html_report/a96f14595379b7c348d66e115ec65a93.png
diff --git a/report/html_report/assets/fonts/Lato-Bold.ttf b/report/html_report/assets/fonts/Lato-Bold.ttf
diff --git a/report/html_report/assets/fonts/Lato-Regular.ttf b/report/html_report/assets/fonts/Lato-Regular.ttf
diff --git a/report/html_report/assets/fonts/lato-bold-webfont.woff b/report/html_report/assets/fonts/lato-bold-webfont.woff
diff --git a/report/html_report/assets/fonts/lato-bold-webfont.woff2 b/report/html_report/assets/fonts/lato-bold-webfont.woff2
diff --git a/report/html_report/assets/fonts/lato-regular-webfont.woff b/report/html_report/assets/fonts/lato-regular-webfont.woff
diff --git a/report/html_report/assets/fonts/lato-regular-webfont.woff2 b/report/html_report/assets/fonts/lato-regular-webfont.woff2
diff --git a/report/html_report/b815e28b1e230cff6e9d7b749edcd562.png b/report/html_report/b815e28b1e230cff6e9d7b749edcd562.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html lang="en"><head><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Moyo header</title><link rel="stylesheet" href="style.d0c3ecc7.css"></head><body> <main class="main"> <a href="#home"> <img src="logo.6c938e44.png" alt="logo moyo"> </a> </main> <header class="header"> <nav class="nav"> <ul class="nav__list"> <li class="nav__item"> <a href="#apple" class="is-active nav__link"> Apple </a> </li> <li class="nav__item"> <a href="#samsung" class="nav__link"> Samsung </a> </li> <li class="nav__item"> <a href="#smartphones" class="nav__link"> Smartphones </a> </li> <li class="nav__item"> <a href="#laptops&computers" class="nav__link" data-qa="hover"> Laptops & Computers </a> </li> <li class="nav__item"> <a href="#gadgets" class="nav__link"> Gadgets </a> </li> <li class="nav__item"> <a href="#tablets" class="nav__link"> Tablets </a> </li> <li class="nav__item"> <a href="#photo" class="nav__link"> Photo </a> </li> <li class="nav__item"> <a href="#video" class="nav__link"> Video </a> </li> </ul> </nav> </header> </body></html>