CSS locator :".header-GlobalAccountFlyout-link.display-block" returns 3 elements in a class. I need to get to the last one -"Create an Account". Does anybody know how to finish writing CSS to get there? Thank You.
Using Attribute Selectors we don't necessarily need the Class selectors here at all.
You have a few options:
If data-uid never changes:
[data-uid="eRDhfBAS"]
If the href link never changes:
[href="/account/signup"]
If the alt text never changes:
[alt="Create an Account"]
If the data-tl-id never changes:
[data-tl-id="header-GlobalAccountFlyout-flyout-link-1"]
If there may be other elements with those same attributes and values, simply include your Class selectors as well. For example:
.header-GlobalAccountFlyout-link.display-block[href="/account/signup"]
Or you could combine some of the above attribute selectors...
[href="/account/signup"][alt="Create an Account"]
Related
I know that we can use css classes for the className attribute but I see in a lot of tutorials that even if the value written for className is not used in the css file it is still used in the components. Can someone explain why? Or how to determine the value of the className we need to use?
The HTML class attribute (as set by the React className attribute) is a general way to label elements with some meaningful labels. It can be used for CSS styling, or JavaScript queries like document.querySelectorAll, or just to make the HTML intent more readable.
In particular, it's common to include classes in your HTML in case you'll need them later for CSS styling or JavaScript queries. To be clear, there's no list of valid class names; you can use whatever names you want, and use or not use them in order code as you wish.
In my React project, sometimes a dynamically generated UUID needs to be added to the a data-testid value to ensure uniqueness amongst duplicate components in the DOM.
I have a test situation where I can grab the element I want. Now I want to get the dynamically generated data-testid from it. I've tried this but it doesn't work:
const questionDropdown = queryAllByText('Free Text')[0];
console.log(questionDropdown.getAttribute('data-testid'));
Any suggestions how to get it?
I think it's a dataset so you can get it like this:
console.log(questionDropdown.dataset.testid);
If you have an expected result you can test it with testing-library/jest-dom:
expect(questionDropdown).toHaveAttribute("data-testid", "test-id");
Doc: https://github.com/testing-library/jest-dom#tohaveattribute
I finally figured out how to do it!
So, I have a Semantic-UI Dropdown with a dynamically generated data-testid. The trick to getting the element is simply to use Regex, like this:
const questionTypeDropdown = getByTestId(/conditional-task-question-type/);
I'm revisiting this. I believe that the answer from adesuriey works great if you're dealing with conventional text, say in an Input element. But in the Semantic UI Dropdown it does not appear to work.
I think the problem lies with finding the correct ancestor element. I've tried many things but with no success.
<div class="html5-video-player iv-module-created iv-module-loaded endscreen-created paused-mode" tabindex="-1" id="player_uid_960859542_1" data-version="//s.ytimg.com/yts/jsbin/player-en_US-vfl_cdzrt/base.js" aria-label="YouTube Video Player">
Is there a way for me to select the above element? The id is randomly generated each time and is the css selector (#player_uid_960859542_1) and xpath (//*[#id="player_uid_960859542_1"]). I've tried using the class but it's a compound name. I tried By.cssSelector(".html5-video-player.iv-module-created.iv-module-loaded.endscreen-created.paused-mode") but that also failed.
The mentioned XPath and CSS path is not working because the value of ID is generated dynamically and both XPath and CSS are designed such that it takes ID value to generate the paths while using firebug. however you can try this XPath :
//*[#data-version='//s.ytimg.com/yts/jsbin/player-en_US-vfl_cdzrt/base.js'][#aria-label='YouTube Video Player] In case if it doesn't work you have an option to find a stable element in the DOM and then have an privilage of moving on parent node, child node or sibling node (watch the video for more detail; links are below).
Earlier I was facing the very similar issue and after a lot of R&D I found many ways to handle it using XPath and CSS selector customization.
I have made a video to get the more insights of it. Watch these two videos:
Create XPath for dynamic elements and
Create CSS path for dynamic elements
I'm sure it will help you out as there are many ways to design path to reach out to this element.
Is it possible to get an element by its name like you can with jQuery?
I'm trying to do the equivalent of the jQuery selector like in jQuery
$('h1')
how is this done with protractor?
I tried
element('h1')
but it doesn't work
There's a couple ways to do this - you can either get it by tagName or by css selector. So any of the following work:
element(by.css('h1')); // works with any css selector
$('h1'); // works with any css selector
element(by.tagName('h1'));
The answer was finally found on github they have a test file that shows all the selectors
element(by.css('h1'));
element(by.css('.my-class'));
I'm trying to dynamically assign styles to my elements (in this case, a ExtJS displayfield).
I can't use CSS classes since I don't know what the colors will be until runtime.
I'm trying:
myDisplayField.getEl().applyStyles({ color: '#ff0000' }); //fail
myDisplayField.getEl().setStyle('color', '#ff0000'); //fail
Just to get the mechanism right, but neither seem to work.
It works using Ext.get(<div id>).setStyle(...), but that doesn't seem as clean to me. Is there a reason the former attempts don't work?
What am I missing?
Thanks.
The reason is simple: you're trying to set the styles on a wrong element. Each field, including displayfield, has quite complex table-based DOM structure that encapsulates the field label, the actual input element (or a div for display fields), and the supporting elements. field.getEl() returns the top, or main, element for a component; in this case that's the top <table> tag. What you need is the input element instead.
Now if you take a look at the DOM structure you'll notice that the <div> that you need to set styles on has an id of displayfield-123-inputEl. The -inputEl suffix is there for a reason; in most cases it indicates that the element has a Ext.dom.Element shortcut in its respective Component. For a field, that would be field.inputEl property that is available after the field has been rendered to the DOM. You can use that as well:
myDisplayField.inputEl.setStyle(...)
Or just use the convenience method available for the fields:
myDisplayField.setFieldStyle(...)
I would also suggest not hardcoding the colors but rather use CSS classes instead. In most cases there is a limited choice of colors depending on a condition, like invalid input, etc. Using CSS will require a bit more work upfront but will save you a lot of headache down the road, when someone will come up with a bright idea of changing the shade of red used for the invalid input, or somesuch.