0

I have a Selenium suite testing my (web) user interface and I'm trying to prove that the appropriate error messages appear when a User puts in invalid values.

<input id="inputID" type="number" min="1" step="1" />

WebElement element = webDriver.findElement(By.id("inputID"));
element.click();
element.sendKeys("-2");
element.??????

It's trivial to do by hand, but for the life of me I can't figure out how to test that the input:invalid CSS is applied or how to read/test the tooltip value.

It would probably be sufficient to prove that the field is marked as invalid, even if we don't test the content of the tooltip, though ideally we'd test both.

InfernalRapture
  • 572
  • 7
  • 19
  • If give invalid data do you get any warning... – Deepan Mar 15 '18 at 17:21
  • The "min" attribute might not mean to you what the programmer intended it to mean. It may not be a minimum value, but a minimum length (in characters). Typically, you should test according to the acceptance criteria you, as the tester, are given. – Bill Hileman Mar 15 '18 at 17:25
  • @Deepan The input is styled via "input:invalid{ border:2px solid red }" in a CSS file – InfernalRapture Mar 15 '18 at 17:25
  • @BillHileman No Min in this case is applied numerically, but I appreciate the consideration – InfernalRapture Mar 15 '18 at 17:26
  • 1
    Try to get the input element and get element.getCssValue("color")); Now if color is red you can mark it as invalid data – Deepan Mar 15 '18 at 17:32
  • @Deepan I tested your idea out with "color", and "border" and "border-color", unfortunately it's not showing the ":invalid" values it's just showing the standard styling of the element even though in the browser I can clearly see the border as red when the test is running. I believe this is because ":invalid" is a pseudo-class which behaves differently, though I do not fully understand how. – InfernalRapture Mar 15 '18 at 17:39
  • @Deepan Interestingly I tried modifying the :invalid class to include "background: blue;" and WAS able to test for that, I think your idea can work if I do it correctly, thank you for your help. – InfernalRapture Mar 15 '18 at 17:46
  • 1
    @InfernalRapture my pleasure :) – Deepan Mar 15 '18 at 17:49
  • Possible duplicate of [How to verify text in message generated by Constraint Validation API in HTML5?](https://stackoverflow.com/questions/37432490/how-to-verify-text-in-message-generated-by-constraint-validation-api-in-html5) – Florent B. Mar 15 '18 at 17:51

1 Answers1

1

I was able to test for styling using the command 

element.getCssValue("border-bottom-color");

Note: Testing for styles related to the border must specify a side, since styles that apply to all four sides is short hand that is broken out into styling for each side. border:blue will be erased and replaced by border-bottom-color:blue, border-top-color:blue, border-right-color:blue, and border-left-color:blue

InfernalRapture
  • 572
  • 7
  • 19