Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Difference between 'style' and 'style-hammerhead-stored-value' of element #1922

Closed
Maksim631 opened this issue Feb 7, 2019 · 3 comments
Closed

Difference between 'style' and 'style-hammerhead-stored-value' of element #1922

Maksim631 opened this issue Feb 7, 2019 · 3 comments
Assignees
@LavrovArtem
Labels
AREA: client STATE: Auto-locked Issues that were automatically locked by the Lock bot TYPE: bug
Milestone
Sprint #31

Comments

@Maksim631
Copy link

What is your Test Scenario?

Changing of element's style by clicking

What is the Current behavior?

Styles which are got by getAttribute('style') are not equal to the styles from 'style' property of element

What is the Expected behavior?

Values of getAttribute('style') and 'style' property are the same

What is your web application and your TestCafe test code?

Web application example:

<div id="ButtonGetAttribute"
     onclick="
     if (!document.getElementById('ButtonGetAttribute').getAttribute('style')){
      document.getElementById('ButtonGetAttribute').setAttribute('style', 'background: red;');// получить hammerhead
      }
     if (document.getElementById('ButtonGetAttribute').getAttribute('style').indexOf('background: red;') >= 0) {
  document.getElementById('ButtonGetAttribute').setAttribute('style', document.getElementById('ButtonGetAttribute').getAttribute('style').replace(/background:(.+?;)/i, ''));
  document.getElementById('ButtonGetAttribute').style.background = 'green';
} else {
         if(document.getElementById('ButtonGetAttribute').getAttribute('style').indexOf('background') >= 0){
  document.getElementById('ButtonGetAttribute').setAttribute('style', document.getElementById('ButtonGetAttribute').getAttribute('style').replace(/background:(.+?;)/i, ''));
  }
}">
    Style button
</div>

Our test example:

  const ButtonGetAttributeSelector = Selector("#ButtonGetAttribute");
  await t.navigateTo("...").click(ButtonGetAttributeSelector); // green
  await t.click(ButtonGetAttributeSelector) ;// transparent

Steps to Reproduce:

  1. Add code snippet to any web page
  2. Click on 'Style button' => background of the button is green
  3. Click once again => background is transparent
  4. Launch test code, it will click on the button twice. After first click background is green, after second it is still green.

Your Environment details:

  • testcafe version: 0.23.3
  • node.js version: 10.14.0
  • command-line arguments: testcafe chrome tests/ -e
  • browser name and version: chrome 72
  • platform and version: windows 10
@miherlosev miherlosev self-assigned this Feb 7, 2019
@AndreyBelym AndreyBelym transferred this issue from DevExpress/testcafe Feb 7, 2019
@LavrovArtem LavrovArtem added this to the Planned milestone Feb 11, 2019
@Maksim631
Copy link
Author

Hi, any news/updates?

@Farfurix Farfurix self-assigned this Apr 1, 2019
@Farfurix
Copy link
Contributor

Farfurix commented Apr 1, 2019

@Maksim631

Hello.

I've reproduced this issue. Our team will research it and check for a suitable solution.

As a workaround, you can use the following clickHandler code:

<html>
<head>
</head>

<body>
<div id="ButtonGetAttribute">
    Style button
</div>
<script>
    function clickHandler() {
        if (!document.getElementById('ButtonGetAttribute').getAttribute('style')){
            document.getElementById('ButtonGetAttribute').setAttribute('style', 'background: red;');
        }

        if (document.getElementById('ButtonGetAttribute').getAttribute('style').indexOf('background: red;') >= 0) {
            document.getElementById('ButtonGetAttribute').setAttribute('style', document.getElementById('ButtonGetAttribute').getAttribute('style').replace(/background:(.+?;)/i, ''));
            document.getElementById('ButtonGetAttribute').setAttribute('style', 'background: green;');
        }
        else if(document.getElementById('ButtonGetAttribute').getAttribute('style').indexOf('background') >= 0) {
            document.getElementById('ButtonGetAttribute').setAttribute('style', document.getElementById('ButtonGetAttribute').getAttribute('style').replace(/background:(.+?;)/i, ''));
        }
    }

    var div = document.getElementById('ButtonGetAttribute');

    div.onclick = clickHandler;
</script>
</body>

</html>

@LavrovArtem LavrovArtem modified the milestones: Planned, Sprint #31 Apr 2, 2019
LavrovArtem added a commit to LavrovArtem/testcafe-hammerhead that referenced this issue Apr 11, 2019
@LavrovArtem
fix `Difference between 'style' and 'style-hammerhead-stored-value' o…
6367a3b 
…f element` (close DevExpress#1922)
@LavrovArtem LavrovArtem assigned LavrovArtem and unassigned Farfurix Apr 11, 2019
@lock
Copy link

lock bot commented Apr 21, 2019

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.

@lock lock bot added the STATE: Auto-locked Issues that were automatically locked by the Lock bot label Apr 21, 2019
@lock lock bot locked as resolved and limited conversation to collaborators Apr 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@LavrovArtem LavrovArtem

Labels
AREA: client STATE: Auto-locked Issues that were automatically locked by the Lock bot TYPE: bug
Projects
None yet
Milestone
Sprint #31
Development

No branches or pull requests
5 participants
@miherlosev @AndreyBelym @LavrovArtem @Maksim631 @Farfurix