how to check bootstrap modal in CSS Regression Testing backstopjs

Question

I'm trying to simulate the clicking of CSS elements on my page and automatically take screenshots of the window at each stage for testing purposes. I'm using backstopJS as the CSS testing/screenshot framework. Everything seems to work fine for this first element. A modal is triggered when i click on the register link in the main header menu. but it is not generating any reference screenshotof the modal.

plz help to trigger a reference screenshot of the modal in the below given script

This is the script :

{
  "viewports": [
    {
      "name": "desktop",
      "width": 1600,
      "height": 900
    },
    {
      "name": "phone",
      "width": 320,
      "height": 480
    },
    {
      "name": "tablet_v",
      "width": 568,
      "height": 1024
    },
    {
      "name": "tablet_h",
      "width": 1024,
      "height": 768
    }
  ],
  "grabConfigs" : [
    {
      "testName":"vawizard"
      ,"url":"http://localhost/vawizard/index.html"
      ,"hideSelectors": [

      ]

      ,"removeSelectors": [
        "header.banner--clone"
      ]
      ,"selectors":[
        "#outer_wrapper header"
        ,".banner_box"
        ,".help_desk"
        ,".big_search_box"
        ,".look_specific"
        ,".smart_tool_box"
        ,"footer"
        ,".copyright_box"
      ]
    }
  ]
}

This is the link http://wizard.hodgesdigital.com/

Any ideas what could be causing this behavior?

score 1 · Answer 1 · answered Sep 01 '15 at 23:27

BackstopJS is mainly focused on testing layout states at different screen sizes and doesn't support the testing of user interactions.

In your case I can make two recommendations. 1) You could add a state to your URL which triggers the modal when your page is loaded OR 2) you could write a custom CasperJS script to test cases like this which require some user interaction. More detail below...

Approach 1: In the first case you could add a hash to your URL which would trigger your modal, In my experience it's common for web apps (e.g. Angular and Ember) to represent modal states in this way....

// in your BackstopJS config
"url": "http://localhost/vawizard/index.html#openModal",


// then as part of a jQuery script
$(document).ready(function(){
  if ( /openModal/.test(location.hash) )
    {
      // Do your open modal action here
      // Then trigger BackstopJS
    }
});

Approach 2: If the above is not your style there is another good option. As part of the BackstopJS install you also have a full version of CasperJS -- so I would recommend going to CasperJS.org to look at some basic examples and see if it makes sense to write your own scripts. It will be a little more time consuming in the short run but the project specific boilerplate you write now may be nice to have for future edge cases (for testing forms, other interactions etc.).

Can u explain this with an example , like where the js script will be added for this testing purpose.. — Kamlesh Gupta, Sep 24 '15 at 10:15

score 0 · Answer 2 · answered May 07 '21 at 16:25

We use custom scripts for such things. e.g

module.exports = async(page, scenario, vp) => {
  await require('./onReadyInfo')(page, scenario, vp);
  await require('./clickAndHoverHelper')(page, scenario, vp);
  await require('./onReadyWaitForImages')(page, scenario, vp);

  await page.waitForSelector("div[data-social-media-source='instagram'] a[data-target='#social-media-settings']");
  await page.click("div[data-social-media-source='instagram'] a[data-target='#social-media-settings']");
  await page.waitForSelector(
    "#checkbox-twitter", {
      timeout: 6000
    }
  );
  await page.waitForTimeout(500);
  await page.evaluate(async() => {
    jQuery("#checkbox-twitter + label").click();
    setTimeout(() => {
      jQuery('#checkbox-twitter + label').focus()
    }, 500);
  });
  await new Promise(resolve => setTimeout(resolve, 300));
};

This will open a dialog on link click, check a checkbox and give the label focus.

how to check bootstrap modal in CSS Regression Testing backstopjs

2 Answers2