Software Quality Assurance & Testing Stack Exchange is a question and answer site for software quality control experts, automation engineers, and software testers. It only takes a minute to sign up.
Sign up to join this community
How do I build a CSS locator for the "Add Photos/Video" link so I can perform a click event on it?
The ID is js_42 which varies and the class is _$qtm_fb2ReactComposerAttachmentSelector_MEDIA which is not always unique on this page (depending on state) and is also kinda hard to read.
Assuming this is unique on the page, you should be able to identify and click the same element using CSS = '[data-testid="media-attachment-selector"]'. (You could also pre-fix the element with a to indicate it's a link but either should work.)
Typically development teams include data-testids for testability / automated testing. It might be worth following up with the team to see if they do include these elements for that purpose (or another purpose). If they do, feel free to suggest additional tags to help you test.
Maybe you can try span._4-fs span:nth-of-type(2)?
See http://www.w3schools.com/cssref/sel_nth-of-type.asp for usage
After further review I recommend using:
#pagelet_composer a[data-testid='media-attachment-selector']
because it is not tied in to the actual text "Add photos..." which may change over time.
It is based on there being a section of the page being used for this message composition ('#pagelet_composer') which has a link for attachments conveniently marked with a data attribute 'media-attachment-selector'
You have not shown all the page HTML or other cases so I can't tell whether this is truly unique, you will have to finally determine that based on the full page HTML and functionality.
Ultimately I would use a Page Object (implementation depeneds on your language and framework) to define this selector, name it something like attach_document and then you can use attach_document.click() in the actual test for readability.
If this is a one page document and/or has this identifier in other places on the page, but only one is visible at a given time you might need to add a .visible qualifier.
