chore(test): simplify element screenshot tests (puppeteer#2093)

jeffplang · Feb 23, 2018 · e2b96df · e2b96df
1 parent 56a475f
commit e2b96df
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 84 deletions.
diff --git a/test/golden/screenshot-element-larger-than-viewport.png b/test/golden/screenshot-element-larger-than-viewport.png
diff --git a/test/golden/screenshot-element-with-scroll-container.png b/test/golden/screenshot-element-with-scroll-container.png
diff --git a/test/test.js b/test/test.js
@@ -2125,105 +2125,25 @@ describe('Page', function() {
       expect(screenshot).toBeGolden('screenshot-element-padding-border.png');
     });
     it('should capture full element when larger than viewport', async({page, server}) => {
-      // compare with .to-screenshot size
       await page.setViewport({width: 500, height: 500});
 
       await page.setContent(`
         something above
-        <style>div.spacer {
-          border: 2px solid red;
-          background: red;
-          height: 600px;
-          width: 52px;
-        }
+        <style>
         div.to-screenshot {
-          border: 2px solid blue;
-          background: rgba(0, 0, 0, 0.5);
+          border: 1px solid blue;
           width: 600px;
-          height: 200.5px;
+          height: 600px;
           margin-left: 50px;
-          transform: scaleY(1.2);
-        }
-        ::-webkit-scrollbar {
-          display: none;
         }
         </style>
-        <div class="spacer"></div>
         <div class="to-screenshot"></div>
-        <div class="spacer"></div>
       `);
-
-      await page.evaluate(function() {
-        window.scrollTo(11, 12);
-      });
-
       const elementHandle = await page.$('div.to-screenshot');
       const screenshot = await elementHandle.screenshot();
       expect(screenshot).toBeGolden('screenshot-element-larger-than-viewport.png');
 
-      expect(await page.evaluate(function() {
-        return { w: window.innerWidth, h: window.innerHeight };
-      })).toEqual({ w: 500, h: 500 });
-    });
-    it('should screenshot element with scroll container', async({page, server}) => {
-      // compare with .to-screenshot size
-      await page.setViewport({width: 500, height: 500});
-
-      await page.setContent(`
-        something above
-        <style>div.spacer {
-          border: 2px solid red;
-          background: red;
-          height: 600px;
-          width: 52px;
-        }
-        div.container1 {
-          width: 600px;
-          height: 600px;
-          overflow: auto;
-        }
-        div.container2 {
-          width: 620px;
-          height: 620px;
-          overflow: auto;
-        }
-        div.to-screenshot {
-          border: 2px solid blue;
-          background: rgba(0, 0, 0, 0.5);
-          width: 580px;
-          height: 580px;
-          margin-top: 50px;
-          margin-left: 200px;
-          margin-right: 50px;
-        }
-        ::-webkit-scrollbar {
-          display: none;
-        }
-        </style>
-        <div class="spacer"></div>
-        <div class="container1">
-          <div class="container2">
-            <div class="to-screenshot"></div>
-          </div>
-        </div>
-        <div class="spacer"></div>
-      `);
-
-      await page.evaluate(function() {
-        window.scrollTo(11, 12);
-      });
-
-      await page.$eval('div.container1', function(element) {
-        element.scrollTo(100, 0);
-      });
-
-      await page.$eval('div.container2', function(element) {
-        element.scrollTo(10, 30);
-      });
-
-      const elementHandle = await page.$('div.to-screenshot');
-      const screenshot = await elementHandle.screenshot();
-      expect(screenshot).toBeGolden('screenshot-element-with-scroll-container.png');
+      expect(await page.evaluate(() => ({ w: window.innerWidth, h: window.innerHeight }))).toEqual({ w: 500, h: 500 });
     });
     it('should scroll element into view', async({page, server}) => {
       await page.setViewport({width: 500, height: 500});