Last active
June 30, 2016 21:03
-
-
Save mcherryleigh/9863fad2744a813c6743ff5ffef4f0db to your computer and use it in GitHub Desktop.
Find and prioritize locators from chrome console. can be copy-pasted into a console command in Chrome or saved and run from dev tools -> sources -> snippets
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//formLoc is the root element to look under. It should be a string representing a css selector | |
//if testing is true print the easily debuggable obj. If not true, drop the debug "element" keys and json.stringify | |
var getSelectors = function(formLoc, testing=false) { | |
var counter = 1; | |
var results = {}; | |
var getTheseTags = 'a,button,input'; | |
//css selector to find children of. Loop over each and use the most-desirable option as their location strategy | |
$$(`${formLoc} ${getTheseTags}`).forEach(function(el) { | |
if(el.attributes.hasOwnProperty('id')){ | |
results[`needsName${counter}`] = {element: el, id: el.id} | |
} else if(el.attributes.hasOwnProperty('name')) { | |
results[`needsName${counter}`] = {element: el, name: el.name} | |
} else if(el.tagName == 'A' && el.attributes.hasOwnProperty('class')) { | |
results[`needsName${counter}`] = { | |
element: el, | |
linkText: el.textContent | |
} | |
} else if(el.attributes.hasOwnProperty('value')) { | |
results[`needsName${counter}`] = {element: el, value: el.value} | |
} else { | |
results[`needsName${counter}`] = {element: el, NEEDED: 'UNKNOWN'} | |
} | |
counter++; | |
}) | |
if(testing) { | |
return results | |
} else { | |
Object.keys(results).forEach(function(key) { | |
if(results[key].element) delete results[key].element; | |
}); | |
return JSON.stringify(results) | |
} | |
}; | |
//The results obj below is what you get without the testing flag. | |
//With the testing flag set to true the console results will have the element under each selector to allow you to hover, view details, etc. | |
/* | |
var results = { | |
"needsName1": {"id": "search"}, | |
"needsName2": {"NEEDED": "UNKNOWN"}, | |
"needsName3": {"name": "success_url"}, | |
"needsName4": {"name": "error_url"}, | |
"needsName5": {"name": "form_key"}, | |
"needsName6": {"id": "firstname"}, | |
"needsName7": {"id": "middlename"}, | |
"needsName8": {"id": "lastname"}, | |
"needsName9": {"id": "email_address"}, | |
"needsName10": {"id": "password"}, | |
"needsName11": {"linkText": "« Back"}, | |
"needsName12": {"NEEDED": "UNKNOWN"} | |
}*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment