I need to identify if the ::after pseudo element exist or not.
When it exist:
<div class="vcp-bigplay" xpath="1"></div>
::after
</div>
When it does not exist:
<div class="vcp-bigplay" xpath="1"></div>
I tried
driver.find_element_by_css_selector('div.vcp-bigplay>div')
and
driver.find_element_by_css_selector('div.vcp-bigplay::after')
and
driver.find_element_by_css_selector('div.vcp-bigplay:after')
None of them works. Can anybody help?
You can use JavaScript executor to retrieve the content value and then check if that exists or not.
Something like this
script = "return window.getComputedStyle(document.querySelector('.vcp-bigplay'),'::after').getPropertyValue('content')";
element = driver.execute_script(script);
if (len(element)==0):
print('not there')
else:
print('there')
You can read in detail here.
Related
The component that I have testing renders something this:
<div>Text<span>span text</span></div>
As it turns out for testing the only reliable text that I have is the 'span text' but I want to get the 'Text' part of the <div>. Using Jest and react-testing-library I can
await screen.findByText(spanText)
This returns an HTMLElement but it seems limited as I don't have any of the context around the element. For example HTML methods like parentNode and previousSibling return null or undefined. Ideally I would like to get the text content of the parent <div>. Any idea how I can do this with either Jest or react-testing-library?
A good solution for this is the closest function.
In description of closest function is written: Returns the first (starting at element) including ancestor that matches selectors, and null otherwise.
The solution would look like this:
screen.getByText("span text").closest("div")
Admittedly, Testing Library doesn't communicate clearly how to do this. It includes an eslint rule no-direct-node-access that says "Avoid direct Node access. Prefer using the methods from Testing Library". This gives the impression that TL exposes a method for a situation like this, but at the moment it does not.
It could be you don't want to use .closest(), either because your project enforces that eslint rule, or because it is not always a reliable selector. I've found two alternative ways to tackle a situation like you describe.
within():
If your element is inside another element that is selectable by a Testing Library method (like a footer or an element with unique text), you can use within() like:
within(screen.getByRole('footer')).getByText('Text');
find() within the element with a custom function:
screen.getAllByText('Text').find(div => div.innerHTML.includes('span text'));
Doesn't look the prettiest, but you can pass any JS function you want so it's very flexible and controllable.
Ps. if you use my second option depending on your TypeScript config you may need to make an undefined check before asserting on the element with Testing Library's expect(...).toBeDefined().
But I have used HTML methods a lot and there was no problem yet. What was your problem with HTML methods?
You can try this code.
const spanElement = screen.getElementByText('span text');
const parentDiv = spanElement.parentElement as HTMLElement;
within(parentDiv).getElementByText('...');
As the title says, for example, I want to create a CSS class named myViewport to overwrite ui-grid-viewport (ui-grid).
This should have been discussed several times here. You can disable the horizontal bar with enableHorizontalScrollbar option. I don't think you would require css to achieve this unless you are trying out something different.
$scope.grid = {
enableHorizontalScrollbar: 0
};
It can take any one of the following values:
0 = disable;
1 = enable;
2 = enable when needed;
And note that you would need to pass the uiGridConstants to your controller.
You shall also check this github repository for more info.
https://github.com/angular-ui/ui-grid
I find a solution it's CSS element>element Selector, I add an id to parent element for example:
<div id=""test>
<div>
<div class="ui-grid-viewport(object)">...</div>
</div>
</div>
in the style.css
the name of class should be div#test >div> .ui-grid-viewport{}
this is a solution not simple, because I should find the position of ui-grid-viewport.
How to remove anchor tag '' in java script?
When I inspected the page, below is the screenshot of what I got
Here is my code:
<div class="dropdownm1-content">
<b>SHOP ALL</b>
<b>SHOP BY CATEGORY</b>
<p class="mn_category">
Just get the Element by using the ID of it and then remove it with the remove() function. Like so:
var removeanchor = getElementById('YOURANCHORTAGID');
removeanchor.remove();
or without creating a variable:
getElementById('YOURANCHORTAGID').remove();
(replace YOURANCHORTAGID with the id of your anchortag). If you want to trigger this after an action just create a function and trigger it with the action you want :).
for further information check the mdn docs:
https://developer.mozilla.org/de/docs/Web/API/ChildNode/remove
You may should add some more information to your question for a more precise answer. However, for the time being this may helps you out.
If you try to use it, pay attention to the fact, that I only adressed the first Element with the class 'text_main' and only the first of its children with 'a' Tag. You may need to change this, according to your code.
// Removing a specified element without having to specify its parent node
container = document.getElementByClass("text_main")[0];
var node = document.getElementsByTagName("a")[0];
if (node.parentNode) {
node.parentNode.removeChild(node);
}
Further information:
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
For that specific link you showed:
document.querySelector('.dropdownm1-content .text-main a:first-child').remove()
Though I'd highly recommend curing the sickness, not the symptom.
I've been trying to access/locate the element shown in the image and have tried various methods. xpath, classname, css but keep getting the error that the element cannot be found. Can you help please ?
Attempt1
driver.find_element_by_class_name(".btn.btn-default").send_keys(os.getcwd() + "InputFiles/Error.png")
Error:
Attemp2:
driver.find_element_by_xpath("//div[#class='upload-btn__wrapper']").send_keys(os.getcwd() + "InputFiles/Error.png")
Error:
This xpath is supposed to work.
"//div[#class='upload-btn__wrapper']/button"
Hope this helps. Thanks.
Hope it help you. Let me know if you need further assistance.
driver.find_element_by_xpath("//div[#class='upload-btn__wrapper']")
I suggest to use below Xpath as it will rely on your Text, so any changes in text of the button will result a failure of the test, which makes perfect sense.
//button[normalize-space(text())='Choose image']
Also use explicit wait before performing any operations with that element.
new WebDriverWait(driver, time).until(ExpectedConditions.visibilityOf(By.xpath("//button[normalize-space(text())='Choose image']")));
WebElement chooseImageButton=driver.findElement(By.xpath("//button[normalize-space(text())='Choose image']"));
chooseImageButton.click();
Try the below solution as well :
driver.findElement(By.xpath("//div[contains(#class,'margin-bottom')]")).findElement(By.xpath("//div[contains(#class,'upload-btn__wrapper')]")).click();
Explanation : I am navigating from the parent div which is "margin-bottom" div class and reaching out to the child div which we want to locate, which is "upload-btn__wrapper".
Let me know, if this works out.
You can click on it with css selector also. Hope this will work for you.
driver.findElement(By.cssSelector(".btn.btn-default")).click();
Hi I am trying to access the DIV element using watir but I am unable to do that,I have tried in different ways but couldn't access it,may be I think it need to be access through some parent element can anyone help me out?
My system Configurations
IE-8
Windows 7
I tried with the below command
#ie.div(:text,'COMPOSE').click
the command gets execute with no errors but no action is performed on the UI
The best solution appears to be switching to Watir-Webdriver. With Watir-Webdriver, #ie.div(:text,'COMPOSE').click will work as expected.
Assuming that is not an option, there are a couple of reasons why that same command does not work with Watir(-Classic) v1.6.7:
The first problem is that #ie.div(:text,'COMPOSE').click will find the first div that contains this text. This would be one of the ancestors of the div you want. As a result, Watir will send the click event against the wrong element.
The second problem is that the div is not responding to the onclick event fired by Watir. I am not sure why this problem exists.
To solve the first problem, you will need to be more specific when locating the div. In this case, the "role" attribute can be used since none of the ancestor elements have this attribute. Watir-Classic does not support using the role attribute as a locator. As a result, you will need to create a custom locator using an element collection and the find method:
#ie.divs.find{ |div| div.attribute_value('role') == 'button' && div.text == 'COMPOSE' }
To solve the second problem, it turns out that double clicking does work. While newer versions of Watir-Classic have a double_click method implemented, it does not exist in 1.6.7. You can replicate the method by calling the fire_event method:
.fire_event('ondblclick')
Putting it all together, the following will click the compose button:
#ie.divs.find{ |div| div.attribute_value('role') == 'button' && div.text == 'COMPOSE' }.fire_event('ondblclick')
There may be more than one element on the page with the text 'COMPOSE', some may be hidden. Try:
#ie.divs(:text,'COMPOSE').size
That is divs with an s.
Then you can try something like the following and see if you get a change in the UI:
#ie.divs(:text,'COMPOSE').each { |b| b.fire_event('click') }
I remember that fire_event works better, but would recommend consulting the docs for the difference between .click and fire_event.