garris / BackstopJS

Catch CSS curve balls.
http://backstopjs.org
MIT License
6.71k stars 603 forks source link

Elements with padding #654

Open anton-kulagin opened 6 years ago

anton-kulagin commented 6 years ago

When: Trying to capture the screen of element with padding Then: Backstop take screenshot of area without padding Example:

{
      "id": "Wiki Tests",
      "viewports": [
            {
                  "label": "desktop",
                  "width": 1920,
                  "height": 1080
            }
      ],
      "scenarios": [
            {
                  "label": "Front-End-Wiki-Computing",
                  "url": "https://en.wikipedia.org/wiki/Front_end",
                  "selectors": [
                        "ul\\:nth-child(11)"
                  ],
                  "misMatchThreshold": "0.1",
                  "onBeforeScript": "chromy/onBefore.js",
                  "cookiePath": "",
                  "referenceUrl": "",
                  "readyEvent": "",
                  "readySelector": "",
                  "delay": "",
                  "hideSelectors": [],
                  "removeSelectors": [],
                  "onReadyScript": "chromy/onReady.js",
                  "hoverSelector": "",
                  "clickSelector": "",
                  "postInteractionWait": "",
                  "selectorExpansion": "",
                  "requireSameDimensions": ""
            }
      ],
      "paths": {
            "bitmaps_reference": "backstop_data/bitmaps_reference",
            "bitmaps_test": "backstop_data/bitmaps_test",
            "engine_scripts": "backstop_data/engine_scripts",
            "html_report": "backstop_data/html_report",
            "ci_report": "backstop_data/ci_report"
      },
      "report": [],
      "engine": "chrome",
      "engineOptions": {
            "waitTimeout": 1500,
            "chromeFlags": [
                  "--disable-gpu",
                  "--force-device-scale-factor=1"
            ]
      },
      "debug": false,
      "asyncCaptureLimit": 2,
      "asyncCompareLimit": 8,
      "debugWindow": false
}

Actual result wikitests_front-end-wiki-computing_0_ulnth-child11_0_desktop Expected Result image Screend while inspecting in developer tool image

@garris , Maybe there is a possibility to take a screenshot of an element including padding?

sashamorozov commented 6 years ago

This is margin, not padding. Probably margin should not be captured.