How can I wrap the text of TextArea hint and also how can I align the hint to the top?
I tried subclassing of TextArea didn't help. I didn't find any relevant method of TextAre to achieve relevant result.
You can't. A hint is a label subclass and those are single line. Unfortunately we implemented it in a way that doesn't make this simple.
However, you can workaround it using code like this:
TextArea actualTa = ...;
TextArea hint = new TextArea("My long hint text");
hint.setEditable(false);
hint.setUIID("TextHint");
Container textAreaWithHint = LayeredLayout.enclose(actualTa, hint);
if(actualTa.getText().getLength() > 0) {
hint.setVisible(false);
}
// I'll leave that as an exercise for you...
textAreaWithHint.addFocusListener(...);
Related
I right clicked the button, selected "Inspect" command and copied and used both XPATH and full XPATH. Neither of them worked for any of the commands below.
xpath = '//*[#id="ember949"]/footer/button[1]'
xpath_full = '/html/body/div[3]/div/div[2]/artdeco-tabs/artdeco-tabpanel[2]/form/footer/button[1]'
button = WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, xpath)))
button = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, xpath_full)))
Can someone please explain? Thank you.
Without the HTML, I cannot give a definitive answer.
Looks like the first id may be dynamic and could change.
As for the second one, the full XPaths are brittle and I do not use them at all.
There could be an iframe that you should switch to first.
You could try searching the entire page for a button element with the continue-btn class:
//button[#class='continue-btn']
I would recommend using the Selector / CSS Selector. In the code just change
By.XPATH
to:
By.CSS_SELECTOR
and instead of copying the XPATH copy the Selector or in some cases CSS Selector.
I just want to know how can we get rid of 508 issue for wave for p-tablecheckbox which states "Form label not present". Basically, we have one p-table inside which there is p-tablecheckbox where we tried using aria-label too but it is not working. So, is there any alternate way where i can get some straightforward technique to resolve this ongoing issue with p-tablecheckbox.
Any help would be appreciated.
Thank you.
"ariaLabel" property is added for p-tablecheckbox in latest version.
If you are unable to use latest version, here is a work around.
Add aria label in typescript code.
First define your aria label in labels list. Then,
this.elements = document.getElementsByClassName("p-checkbox");
for (let i = 0; i < this.elements.length; i++) {
this.elements[i].ariaLabel = this.labels[i];
}
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.
I'm trying to show text with SpanLabel, but this component does not display all the text if there is line break. I then try it with TextArea and Label UIID, but the result is the same. Can someone help me on this issue? Thanks
I am having the same problem here. I use the SpanLabel inside a Dialog and the last one or two lines are always cut off.
It only happens when I use the setPreferredW property:
spanLabelDialog.setPreferredW(Display.getInstance().getDisplayWidth()-300);
Is this intended?
Somehow the setMargin property doesn't work for the dialog, neither hard-coded, nor in CSS.
Here is my code:
private void dialolg () {
String longText = "'There should be the whole text displayed here, but it seems the last one or two lines always get cut off'";
spanLabelDialog.setText(longText);
dialogExplain.add(BorderLayout.CENTER, spanLabelDialog);
spanLabelDialog.setUIID("SpanLabelDialog");
spanLabelDialog.setTextUIID("SpanLabelDialog");
spanLabelDialog.setPreferredW(Display.getInstance().getDisplayWidth()-300);
dialogExplain.show();
}
when the text attribute is set to
text-overflow: ellipsis;
the overflowed text will be displayed as "XX..." (see screenshot for more )
how can I find the overflowed text/element in webdriver?
thanks in advance
Screenshot of Overflowed text
Probably the easiest/best way to do this is to use the JS innerText property, e.g.
driver.findElement(lcoator).getAttribute("innerText");
If I remember correctly, some browsers use textContent instead.
driver.findElement(lcoator).getAttribute("textContent");
This should get you the full text inside that element.
You could also pull innerHTML and parse it (if needed) or remove the text-overflow style from the element but these are harder/more complicated.
In case you have jQuery available in your project, you can write your own selector:
$.expr[':'].truncated = function (e) {
// you *might* want to check if css property "text-overflow"
// is set to "ellipsis" as well, to filter other truncations:
return e.offsetWidth < e.scrollWidth;
};
and go from there:
items = $('.your-selector:truncated');
(heavily based on the answers here)