-1

Can we test visual behavior of interaction with element?

For example, I have a button on the page, which visually activates in a few moments after being clicked. Like a short responce animation after clicking one of these Angular buttons.

Is it possible to check it, preferably with Selenium (for Python)? Is there any way to perform visual testing in Selenium?

ornichola
  • 19
  • 1
  • 1
  • 6

3 Answers3

2

Selenium lets you inspect the DOM, so yes.

Typically you would lookup your button, simulate a click event, then use a wait function to wait for your other element to show, and then you can inspect that element for content.

https://github.com/SeleniumHQ/selenium/wiki/Getting-Started

MrE
  • 19,584
  • 12
  • 87
  • 105
  • No, this is not what I want. As I say, I want to check short visual response of element interaction. Like a click on [one of these Angular buttons](https://material.angularjs.org/latest/demo/button). – ornichola Feb 01 '18 at 18:41
  • 1
    well, the DOM has to change for these interactions to occur: either a style is changing or something, so you need to look for these changes to make sure they happen. – MrE Feb 01 '18 at 18:43
  • I think the question is about the validation of a visual effect which is usually performed by the CSS engine which implies no impact on the DOM. The only way I know of is to take a screenshot before and after and to test the difference. – Florent B. Feb 01 '18 at 18:44
  • if you want to compare 'visual' changes, then you may need to take screenshots at the right time. the headless browsers like PhantomJS can do that easily, but then you'll need to compare images. – MrE Feb 01 '18 at 18:44
  • 1
    @FlorentB. for it to be a CSS effect, there has to be a change in 'style' so it will show in the DOM. Check the example buttons refered by the OP, they cause changes in the DOM – MrE Feb 01 '18 at 18:45
  • @MrE, no there are some css rules like on mouse over. – Florent B. Feb 01 '18 at 18:46
  • @MrE, see https://developer.mozilla.org/en-US/docs/Web/CSS/:hover for an example. – Florent B. Feb 01 '18 at 18:47
  • you can simulate mouseover in selenium., you can even check style using scripting if you wanted... it's possible. probably not the most efficient way to do this though. – MrE Feb 01 '18 at 18:48
  • @MrE, not always the case. For instance it's not possible to check the style set by `:hover` via scripting. See https://stackoverflow.com/questions/11495535/why-doesnt-getcomputedstyle-work-with-pseudo-classes-like-hover – Florent B. Feb 01 '18 at 18:54
  • @FlorentB. While I'm sure you are correct about the instances you are talking about, OP is asking specifically about clicking the buttons on the page he linked. For those cases, I don't see any where the button click doesn't trigger a DOM change which can be detected by Selenium. – JeffC Feb 02 '18 at 05:37
  • @JeffC, the link illustrate the visual effect in question but the post doesn't say how the current effect is implemented. Most effects can be implemented with CSS only, without JavaScript and without any change on the DOM when the interaction occurs. – Florent B. Feb 02 '18 at 13:26
2

Technically, No but in a way Yes. Selenium doesn't visually inspect the page so in that way, Selenium does not and cannot visually test the page.

But... what it can do is to validate the change in DOM, change in CSS styles, etc. that create those visual changes. For example, your example page has a WARN button in the Raised section (2nd row). Before the click, the HTML of that button looks like

<button class="md-raised md-warn md-button md-ink-ripple" type="button" ng-transclude="">
    <span class="ng-scope">Warn</span>
</button>

After the click the button HTML looks like

<button class="md-raised md-warn md-button md-ink-ripple" type="button" ng-transclude="">
    <span class="ng-scope">Warn</span>
    <div class="md-ripple-container" style="background-color: rgba(255, 255, 255, 0.1);">
        <div class="md-ripple md-ripple-placed md-ripple-scaled md-ripple-active" style="left: 43.5px; top: 18px; background: rgb(255, 255, 255); width: 96.0052px; height: 96.0052px; border-color: rgb(255, 255, 255);"></div>
    </div>
</button>

With Selenium, you can detect those changes and then do validations on the changes to ensure they are what you are expecting.

The problem is that changes to CSS styles and DOM don't necessarily mean that the page visually changes. An example... let's say you have a simple button

<button class='button'>

When it is clicked, the 'clicked' style gets added.

<button class='button clicked'>

You could click the button and verify that the 'clicked' style gets applied to that button... and it does so the validation passes... hurray! But, what Selenium didn't see (because it's actually not visually looking at the page) is that the 'clicked' style didn't contain the styling that it was supposed to have so the button didn't actually look any different even though the correct style was applied.

In summary, Selenium can validate changes in CSS and HTML that drive visual changes but it cannot (on it's own) actually visually verify the page. You can use additional libraries to take pictures of the page and validate those by comparing them against what the page is expected to look like. There are services like applitools.com that do this for a fee.

JeffC
  • 22,180
  • 5
  • 32
  • 55
  • Note that you can validate a rendered style which was set via JavaScript with `.value_of_css_property('a rendered css property')`. It returns the style visible from a user point of view. Though it won't reflect a style set dynamically with a CSS pseudo class like `:hover, :focus, :visited, :active`. This method rely on [`window.getComputedStyle()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle). – Florent B. Feb 02 '18 at 17:11
  • @JeffC thank you, your explanation is well understandable. – ornichola Feb 06 '18 at 12:09
0

Fot those, whom @JeffC answer is not enough, there are several practices to perform screenshot based testing and visual checks, e.g. applitools.

More tools can be found here (ru).

Adam Carmi speech - Advanced Automated Visual Testing With Selenium - also can be helpful.

ornichola
  • 19
  • 1
  • 1
  • 6