We Keep Coding

How to click on pseudo-element when testing?

I have a switch / toggle element coming from bootstrap. It works perfectly as expected but I'm having trouble when testing the feature because I don't know how I can click on it:
the toggle is handled by the pseudo-elements :before & :after. I tried many pieces of code to simulate the click on it with capybara but I didn't find a way to achieve it...
Here the snippet: https://jsfiddle.net/ynuf96qe/
Anyone has an idea? Thank you!
Sorry for this element, I didn't find a way to bypass the link error from stackoverflow...
<div></div>

I finally found a way out even if I don't like it...
I changed the way the toggle is displayed in test environment: it is a simple checkbox that allows me to click on it through Capybara.
It now works fine but I'm aware that is a hack.

Suggestions on how to get a consistent xpath for a dom element in javascript

I have been testing multiple code snippets, npm packages, etc. trying to find a way to consistently get an xpath from a dom node. The only solution I found that works consistently is by using the chrome dev tools and choosing copy -> copyFullXpath.
What I currently have is working reasonably well but it doesn't seem to work well for a tags. I'm specifically trying to get data from the shopify admin. I realize they have an api but I need something I can implement in a chrome extension. Shopify frontend is implemented in React but I don't think it's related. I'm currently using this with success other than shopify a tags: https://github.com/firebug/firebug/blob/f8cf7e9c918dcf67c58f5affc0fb3716b0660232/extension/content/firebug/lib/xpath.js
I see chrome dev tools is open source but I don't know enough to extract the xpath portion (DomPath.js).
Any suggestions are appreciated.

After more debugging, I found that hovering over anchor tags was causing a div to be inserted several nodes up in the hierarchy. It was, in fact, due to the site. I decided when get the xpath from the element, to clone the current node and re-append it to it's parent so the event listeners would be removed. This solved my issue.

Selenium clicking button with no name or id

I've been struggling with trying to automate this page. After I login, I'm at this page where I'm supposed to click a button before I redirects me to the next page. The problem is that this button does not have a name or an ID which is making it very difficult to find this element. I've tried mechanize and splinter both. And finally tried selenium but that didn't help either. Really struggling with this. Just need to click this damn button! Any help would be really really appreciated. Love python and automation, but this time nothing seems to be working for me. Please find below a snapshot showing the the code shown when I click on "inspect element". Also, I can't type here the page source code as it is >300000 characters, so you can probably take a look at the page (you'll need to login which takes just 10 seconds). The page I'm referring to is right after you login - http://www.160by2.com/Index
[!Snapshot showing the code I get when I click "inspect element"
[]1

There is class name:
driver.findElement(By.className("da-sms-btn").
Also you can open application in Chrome and copy CSS or XPATH in browser:
Open application in Chrome
Inspect element
Right click on highlighted area
Copy CSS or XPATH

You can try first getting the form by the id, then getting the button by the class name:
wd.find_element_by_id("frmDashboard").find_element_by_class_name("da-sms-btn").click()

You can try to find the element through its xpath. Selenium does a good job of this:
webdriver.find_element_by_xpath("element xpath").click()
You can easily find the xpath by going to the inspect element sidebar on Chrome and right clicking on the element you want. The right click drop down menu should have an option "copy xpath".

I would write a cssSelector as follows and try that.
button[onclick*='aSMS']
Notice, I am doing a partial search with *

Thank you so much for your replies! I was actually able to make it work using splinter instead of selenium! Here's what I did-
1) I just executed the js which was being executed on the onclick event of the button.
jsstring="window.parent.openPage('SendSMS?id="+id+"', 'aSendSMS', 'aSMS', 'ulSMS')"
br.execute_script(jsstring)
2) Subsequently, I was faced with the problem that on the next page, everything was embedded inside iframe, and so find_by_name and all were not able to find elements. For that, splinter provides a nice method (Which is documented REALLY bad, so had to figure it out myself with help from stackoverflow)
with br.get_iframe('iframe_Name') as iframe:
iframe.fill("Element_to_fill_Name","Text_to_fill")
iframe.find_by_tag("TagName")[Index_number].fill("Text_To_Fill")
Worked out brilliantly! Thanks everyone :)

Identifying What Javascript is Running on a <span> through Chrome Inspector or Firebug

I am working on a site that has info being generated dynamically into <span></span> tags through jQuery. The span has a class of "Price" and an id of a Product Code and it's being generated from a JSON data sheet according to the ID. The problem is, this is part of a much bigger framework and I can't seem to find where the Javascript is that's accomplishing this so I can troubleshoot it.
I'm trying to figure out how to find that out using Google Chrome Inspector or Firebug. I'm assuming the page records this info when it's loaded but I can't seem to find where that info would lie. I know this may be pretty basic but I new to the Inspectors beyond just reading the HTML and CSS. Thanks for your help!

Try going to the javascript console in your browser and use this:
$("#ProductCode").data("events")
Then if you expand the object you'll see the events.

JQuery tool to show selected DOM elements in real time

I was recently on CodeSchool's website and took the JQueryAir course that features a web-based text editor that shows - in real time - what elements of the DOM are being selected as you write your JQuery code. It does this by highlighting the selected elements of the html page in light gray.
Does anyone know of text editor (or plugin) that can recreate that functionality? I'm mainly looking to use it for practice purposes. Or if you know of a website that would allow me to do they same thing, that would be great too.
Here is a screenshot to give you an idea of what I mean:
As the JQuery in the bottom panel changes, the html above is highlighted.
Any advice appreciated - thanks!

A simple way to do this (although perhaps not quite as dynamic as you would like) is to use FireBug's console (or similar in Chrome, IE9 etc.). After loading a page containing a jQuery reference in FireFox, go to FireBug's Console tab and paste this.
$("p").css("background-color", "gray");
Hit Enter. You can change the selector to see the results, though they will be additive until you refresh the page. Use the up arrow to bring back your most recent selector to edit.
EDIT: OK, this was before you added the screenshot showing the desired HTML source highlighting. Still, perhaps this method will come in handy at some point.