I'm writing tests using Selenium WebDriver. While tests run, I want to know which element is being interacted. This can be achieved by highlighting that element before performing any action on that element. Is there any Selenium WebDriver api (for Ruby) available to achieve this?
I could find solution for this. Following is the way, using javascript, we can highlight element:
driver.execute_script("arguments[0].setAttribute('style', arguments[1]);", element, "color: yellow; border: 2px solid yell>
And following is to remove highlight from it:
driver.execute_script("arguments[0].setAttribute('style', arguments[1]);", height, "")
Related
I'm trying to make all links on my page have a custom underline similar to this.
Here's what I have so far of a menu that's going to use this feature:
CodePen
The underline, instead of appearing under each link, appears under the "toolbox" div (the link objects' grandparent).
I've tried just making the first CodePen but with the features SCSS allows you (& and nested rules), but I seem to be missing something and won't even show the underline. I'm guessing it has something to do with my use of the parent selector.
How do I make my current code work correctly? If the issue is with my use of parent selectors in general, what is the correct selector to use in this case?
(Stack Overflow is making me put this)
You are using position: absolute in ::after therefore the underline will have absolute position not related to the <a>. Just add position relative to <a> thus inclosing the absolute ::after content to it.
.navbar {
background-color: #191919cc;
padding: 10px;
border-radius: 10px;
a {
position: relative; // here
margin: 0 10px;
}
}
codepen link: https://codepen.io/ashwin-chandran/pen/BaZjQLz
The google doc is embedded on a website inside an iframe.
Here is the code I use to try to insert a random text on the google doc
sample_text = Faker::Lorem.sentence
$browser.iframe(id: 'google_iframe').div(xpath: "//div[#class='kix-lineview']//div[contains(#class, 'kix-lineview-content')]").send_keys (sample_text)
$advanced_text_info['google_doc_article'] = sample_text
But im getting error when I run the test
element located, but timed out after 30 seconds, waiting for #<Watir::Div: located: true; {:id=>"google_iframe", :tag_name=>"iframe"} --> {:xpath=>"//div[#class='kix-lineview']//div[contains(#class, 'kix-lineview-content')]", :tag_name=>"div"}> to be present (Watir::Exception::UnknownObjectException)
Problem
The root of the problem is how Google Docs has implemented their application. The div you are writing to does not include the contenteditable attribute:
<div class="kix-lineview-content" style="margin-left: 0px; padding-top: 0px; top: -1px;">
As a result, Selenium does not consider this element in an interactable state. A Selenium::WebDriver::Error::ElementNotInteractableError exception is raised. You can see this by bypassing Watir and calling Selenium directly:
browser.div(class: 'kix-lineview-content').wd.send_keys('text')
#=> Selenium::WebDriver::Error::ElementNotInteractableError (element not interactable)
Watir confuses the matter by hiding the exception. As seen in the following code, the not interactable error is raised as an element not present exception - UnknownObjectException. I am not sure if this was intentional (eg backwards compatibility) or an oversight.
rescue Selenium::WebDriver::Error::ElementNotInteractableError
raise_present unless browser.timer.remaining_time.positive?
raise_present unless %i[wait_for_present wait_for_enabled wait_for_writable].include?(precondition)
retry
In summary, the problem is that the element is not considered interactable rather than because it isn't present.
Solution
I think the best approach here is to make the div interactable before trying to set the text. You can do this by adding the contenteditable attribute yourself:
content = browser.div(class: 'kix-lineview-content') # This was sufficient when using Google Docs directly - update this for your specific iframe
content.execute_script('arguments[0].setAttribute("contenteditable", "true")', content)
content.send_keys(sample_text)
I don't have a lot of experience with Joomla and I'm sure how this will be a really simple question to someone who was work in Joomla before.
I'm working on existing project where I need to add inline css style to elements which are created on this way:
JHTML::_('grid.sort', $name[$id], 'a.'.$name[$id], $this->listDirn, $this->listOrder)
So I need something like this:
JHTML::_('grid.sort', $name[$id], 'a.'.$name[$id], $this->listDirn, $this->listOrder, 'style: height 500px; color: blue;')
Thanks in advance
Every kind of help will be appreciated
There is no way to pass styles to the sort element directly as you can see here in the code
https://github.com/joomla/joomla-cms/blob/staging/libraries/cms/html/grid.php#L74.
What you can do is to add the style on the document directly:
JFactory::getDocument()->addStyleDeclaration('#myelement {height 500px; color: blue;}');
perhaps you want to add !important to the style to enforce it.
What can be the Xpath to get the background-image CSS Property of a DIV tag whose ID is mentioned in (selenium webdriver)?
Ex: (div id="abc", style="width: 538px !important; height: 242px !important; background-image: url(http://test.com/images/abc.png); position: relative; background-position: 0% 0%;")
I want to find this image with url:(http://test.com/images/abc.png)
I don't get your question, please format and expand a bit, it's kind of vague to me.
I assume you want to ask one of the following questions, but not sure which.
How to get the background-image CSS Property of a div using Selenium?
Answer: Use Selenium's native GetCssValue() (C#), css_value (Ruby), or equivalent method in other language bindings.
IWebElement abc = driver.FindElement(By.XPath("//[#id='abc']")); // use XPath as you requested
string imageUrl = abc.GetCssValue("background-image");
How to locate a div element by its background-image CSS property using XPath?
Answer: If you don't want to use ID (which you should in this example case), you can totally do it in CssSelector or XPath. (XPath is the last option you should choose though)
IWebElement abc = driver.FindElement(By.XPath("//div[contains(#style, 'background-image: url(http://test.com/images/abc.png);')]"));
How to use XPath to get an element's attribute content which has background-image?
Answer: Not really useful for Selenium, but here you have it: //div[#id='abc']/#style
In the code:
<img style="cursor: pointer; background-color: transparent;" onclick="changeTeamHint(2155);" src="/images/icon_edit_inactive.png">
onclick="changeTeamHint(2155);" is always changing. The number increases as I add more fields to my form.
How do I get the last element in Selenium IDE? For example, if I add a text field with "changeTeamHint(2156)", how do I use Selenium IDE to select the latest one? If its 2157, it selects 2157. Etc.
Here's what I got so far: xpath=(//img[#style='cursor:pointer;'])[last()]
But my coworker told me to try to find it by onclick, and here's what I got that works: xpath=(//img[#onclick='changeTeamHint(2155);'])[last()]
I tried: xpath=(//img[#onclick='changeTeamHint();'])[last()], but it gives me an error
I think you want to do a starts-with for value of the onclick attribute:
xpath=(//img[starts-with(#onclick, 'changeTeamHint')])[last()]