The 30 days of testing challenges are energizing me! Day 23’s challenge is to help someone test better. I’m going to combine that one with stepping out of my comfort zone on day 14 by sharing what I learned here. It may help you test better!
Recently, my awesome teammate Chad Wagner and I were trying to reproduce a problem found by another teammate. Chad and I are testers on the Pivotal Tracker team. One of the developers on our team reported that he was hitting the backspace button while editing text in a story while another project member made an update, and it caused his backspace button to act as a browser back button. He lost his text changes, which was annoying. In trying to reproduce this, we found that whenever focus goes outside the text field, the backspace button indeed acts as a browser back button. But was that what happened in this case? It was hard to be sure what element has focus.
Chad wanted a way to see what element is in focus at any given time to help with trying to repro this issue. He found a :focus psuedo class in CSS that seemed helpful. He also found a bookmarklet to inject new CSS rules from Paul Irish. With help from a developer teammate and our Product Owner, Chad made the following bookmarklet:
javascript:(function()%7Bvar newcss%3D”:focus { outline:5px dashed red !important} .honeypot:focus { opacity:1 !important; width: 10px !important; height: 10px !important; outline:5px dashed red !important}”%3Bif(“%5Cv”%3D%3D”v”)%7Bdocument.createStyleSheet().cssText%3Dnewcss%7Delse%7Bvar tag%3Ddocument.createElement(“style”)%3Btag.type%3D”text/css”%3Bdocument.getElementsByTagName(“head”)%5B0%5D.appendChild(tag)%3Btag%5B(typeof document.body.style.WebkitAppearance%3D%3D”string”)%3F”innerText”:”innerHTML”%5D%3Dnewcss%7D%7D)()%3B
This bookmarklet puts red highlighting around whatever field, button or link on which your browser session has focus, as shown in the example.
What does this have to do with my comfort zone?
Chad is always trying new things and dragging me out of my comfort zone. He told me about the bookmarklet. I didn’t even know what a bookmarklet is, I had to start searching around. Chad sent me the code for the bookmarklet, and I tried unsuccessfully to use the bookmarklet. I was working from home that day, so we got on Zoom and Chad showed me how to use this. I read the blog posts (listed above) that he had found.
These fancy tools tend to scare me, because I’m afraid I won’t understand them. And indeed, I do not understand this very well. So we need to find time so that Chad can pair with me and explain more about this bookmarklet. My understanding is that this could work on any web page, but I haven’t been able to get it to work with another one. So this will be getting me out of my comfort zone again soon.
Can you try it?
If being able to see what has focus on your web page would help you test better, maybe you can try this out, and if you can get it to work, maybe you can help me. Day 24’s challenge is to connect with someone new, so let’s connect! And when I learn more, which I’ll try to do tomorrow, I’ll update this post.
Team effort FTW
Our PO who helped Chad get this bookmarklet working thinks it’s such a good idea that he added and prioritized a story in our backlog to allow users to enable a mode to show what has focus in Tracker. The team thinks this is a cool idea, and it will be done soon. So I won’t have to worry about the bookmarklet for that, but I still want to learn more about how I can use CSS rules and bookmarklets to help with testing.
2 comments on “Stepping out of my comfort zone”
Hello, Lisa!
Thank you a bunch! Your expirience really rallies the troops.
Could you share also what book did you choose in Day 1?
I picked a Jerry Weinberg book, but haven’t read it yet, instead I read Why Did the Policeman Cross the Road by Stevyn Colgan, all about preventing and solving problems!