Experimenting with alterations to link styles

Question

Experimenting with alterations to link styles

A particular test we are conducting involves examining the style changes of a link (a element) after a mouse over.

Initially, the link is displayed with a black font and no decoration. However, upon hovering the mouse over it, the font color changes to blue and the text becomes underlined. Below is the test in question:

it("should change font style on mouse over", function () {
    expect(scope.page.forgotPassword.getCssValue("color")).toEqual("rgba(11, 51, 60, 1)");
    expect(scope.page.forgotPassword.getCssValue("text-decoration")).toEqual("none");

    browser.actions().mouseMove(scope.page.forgotPassword).perform();

    expect(scope.page.forgotPassword.getCssValue("color")).toEqual("rgba(42, 100, 150, 1)");
    expect(scope.page.forgotPassword.getCssValue("text-decoration")).toEqual("underline");
});

The issue arises when approximately 1 out of 10 runs fail due to the following error messages:

Expected 'rgba(11, 51, 60, 1)' to equal 'rgba(42, 100, 150, 1)'.

Expected 'none' to equal 'underline'.

My suspicion is that the test reads the css styles before they have had a chance to change.

How can I enhance the reliability and stability of this test? Any assistance would be greatly appreciated.

css testing selenium protractor end-to-end

Answer 1

Answer №1

Upon receiving a recommendation from @P.T., I have successfully implemented a unique reusable "Expected Condition":

checkForCssValue = function (elementFinder, cssProperty, cssValue) {
    return function () {
        return elementFinder.getCssValue(cssProperty).then(function(actualValue) {
            return actualValue === cssValue;
        });
    };
};

Here is an example of how this can be used:

browser.wait(checkForCssValue(scope.page.forgotPassword, "color", "rgba(42, 100, 150, 1)"), 1000);
browser.wait(checkForCssValue(scope.page.forgotPassword, "text-decoration", "underline"), 1000);

Answer 2

Upon receiving a recommendation from @P.T., I have successfully implemented a unique reusable "Expected Condition":

checkForCssValue = function (elementFinder, cssProperty, cssValue) {
    return function () {
        return elementFinder.getCssValue(cssProperty).then(function(actualValue) {
            return actualValue === cssValue;
        });
    };
};

Here is an example of how this can be used:

browser.wait(checkForCssValue(scope.page.forgotPassword, "color", "rgba(42, 100, 150, 1)"), 1000);
browser.wait(checkForCssValue(scope.page.forgotPassword, "text-decoration", "underline"), 1000);

Answer 3

Answer №2

The delay in CSS update that you are experiencing with protractor/webdriver might be due to the asynchronous nature of the updates. Have you implemented any unique methods for handling CSS updates on hover? For instance, is there a specific animation or update delay being used?

In situations where protractor may not anticipate a delay in updates, it's advisable to approach your test differently. Rather than expecting an immediate result and racing against browser changes, consider reframing the test as "waiting until the desired value appears." While this approach may be slower in case of failure, it could prove beneficial.

It may be simpler to check for the change in the text-decoration property to 'underline' (assuming both properties update simultaneously). By waiting for one property change, you can validate the other as well.

Instead of:

expect(scope.page.forgotPassword.getCssValue("text-decoration")).toEqual("underline");

You could try the following untested code:

browser.wait(function() { 
 return scope.page.forgotPassword.getCssValue("text-decoration")).then(function(value) {
   return value === 'underline';
 });

(Alternatively, utilize the Expected Conditions infrastructure for this purpose ?)

To streamline the process, encapsulate the functionality within a function:

function waitForValue(valPromise, expectedVal) {
   return browser.wait(function() {
      return valPromise.then(function(value) {
         return value === expectedValue;
      });
   });
}

// Update your test with:
waitForValue(scope.page.forgotPassword.getCssValue("text-decoration"), 'underline');

Answer 4

The delay in CSS update that you are experiencing with protractor/webdriver might be due to the asynchronous nature of the updates. Have you implemented any unique methods for handling CSS updates on hover? For instance, is there a specific animation or update delay being used?

In situations where protractor may not anticipate a delay in updates, it's advisable to approach your test differently. Rather than expecting an immediate result and racing against browser changes, consider reframing the test as "waiting until the desired value appears." While this approach may be slower in case of failure, it could prove beneficial.

It may be simpler to check for the change in the text-decoration property to 'underline' (assuming both properties update simultaneously). By waiting for one property change, you can validate the other as well.

Instead of:

expect(scope.page.forgotPassword.getCssValue("text-decoration")).toEqual("underline");

You could try the following untested code:

browser.wait(function() { 
 return scope.page.forgotPassword.getCssValue("text-decoration")).then(function(value) {
   return value === 'underline';
 });

(Alternatively, utilize the Expected Conditions infrastructure for this purpose ?)

To streamline the process, encapsulate the functionality within a function:

function waitForValue(valPromise, expectedVal) {
   return browser.wait(function() {
      return valPromise.then(function(value) {
         return value === expectedValue;
      });
   });
}

// Update your test with:
waitForValue(scope.page.forgotPassword.getCssValue("text-decoration"), 'underline');

Experimenting with alterations to link styles

Answer №1

Answer №2

Similar questions

Can floated divs be prevented from collapsing without taking up any width?

A guide to resizing images to fit the page in React using Bootstrap

Automated static file versioning in Google App Engine/Python

Tips on concealing the parent div while only displaying the child div

Organize your table with CSS styling

Optimizing Spacing in Twitter Bootstrap 3.1 Nav-stacked Design

Testing Laravel Pagination Features

The back button functionality in Android cannot be altered or overridden using JavaScript

Incorporating pre-designed elements into the bottom section of my

What is the reason for the image not being positioned in the top left corner of the html page?

How to locate and interact with the submitName element using Selenium WebDriver

Alternating row colors using CSS zebra striping after parsing XML with jQuery

What could be causing the background to disappear when the window width is reduced?

Troubleshooting a Chromedriver issue upon shutting down an EC2 instance

The navbar toggler icon is not displaying

Tips for minimizing the arrow size in the infowindow on a Google Maps interface

Tips for executing a function in the HC-Sticky plugin?

Tips on adjusting the color of a link once it has been clicked?

Button Fading in Selenium

Adaptive website backdrop