I am currently working with capybara for integration testing and as part of our testing framework. I am running into an issue that I cannot seem to find a solution to. So the scenario is this, I initially do a find for a tbody element. I get the object back and thats all well and good. The problem that I am facing is that there is a point in my testing where I need to assert that the css class of the tbody object that I am working with has changed. Every method I have tried so far fails. The code looks something like this:
#element = find('tbody')
--tbody css selecor changes to '.is-edit-post'
#element.find('.is-edit-post')
I am trying to assert that the capybara object has that css selector. I have also tried the following:
#element.has_css('.is-edit-post')
#element.assert_selector('.is-edit-post')
Now, I dont fully understand how the #find method works and what exactly it returns. At this point, I am speculating that since the tbody object didnt have that css selector at the time it was found and returned by the #find method, that this is why it is returning false or throwing an exception saying it is not found.
Anyone have any ideas on how I can get at the attribute of that capybara object if the attributes for that object change?
It's been a long while since I posted this question, but I think that the answer I was looking for in this case was:
#element[:class].include? 'is-edit-post'
Or if the element didnt update, I would need to grab it again and then check the class:
find('tbody')[:class].include? 'is-edit-post'
In any case, I got around this problem long ago.
Related
I'm trying to render my list of data using the WindowScroller and List from react-virtualized, but for some reason, only a portion of my data is rendering. I've read over the docs and I believe I have all the necessary props...help is appreciated!
Taking my List out of the WindowScroller renders everything correctly, but I'd like to keep the WindowScroller to give scrolling controls to the parent element.
There are 100 items in my data set, but only a portion of them are rendering.
Here is a sandbox with an example: https://codesandbox.io/s/jolly-gagarin-vczki1?file=/src/App.js
UPDATE #1:
I believe I've found the cause of my error! It seems that the height in the List element is the issue; it's not large enough thus cutting off my data. Because my List has no fixed height to begin with (height depends entirely on the number of children), I think I need a way to dynamically calculate the height of the List. I did find a method for List elements called measureAllRows, but I can't get it to work :( (see my sandbox above)
UPDATE #2:
I found a really hacky way to do it; by setting the List element's height prop to Infinity, I can get all of my items to render. This doesn't feel like a good way to solve the problem, but it does fix my issue with a dynamic list height.
UPDATE #3:
The answer below helped when just using AutoSizer, but I was curious... if I were to put my AutoSizer into a WindowScroller like so: https://codesandbox.io/s/ecstatic-sunset-g4k3ly?file=/src/App.js, how could I achieve a similar fix for displaying all of my data?
I can say that the problem lies in one of the parent div for WindowScroller component which is causing this behaviour.
The overflow property cannot be set to auto for WindowScroller to work. If you try executing only the windowScroller part without modal window it works as expected.
https://codesandbox.io/s/elastic-ritchie-k938m0?file=/src/App.js
I was also stuck with similar problem and this worked for me, in your code try removing the autoheight parameter and get the height from the autosizer.
Reference:
https://codesandbox.io/s/recursing-pine-2w2m8f?file=/src/App.js
I am a little bit new to programming but python really made get into it. I am trying to create a programm that automatically checks for updates in a website. I've successfully implemented the neccessary code to call the page of enrollment but yet there is one element that cannot be located. Since I have to do it for multiple courses and iterate throught them there is no specific id, I've tried to find it by title but also this didn't work.
Is there a way you can locate the button with the title "enroll".
I've tried
driver.find_element_by_xpath("//a\[#title ='enroll']").click()
but this didn't work and I always get
NoSuchElement
error.
The XPATH for the button is simply: //*\[#id="id572"\]
Here is the part of the HTML code:
From the screenshot of HTML code you provided, the element is <button>, not <a>.
Try this xpath expression //button[#title='enroll']
This should do it if it's not in any iframes. Just grab the button whose title is enroll and click. Your css selector was an a tag and it might get id dynamically.
driver.find_element_by_css_selector("button[title ='enroll']").click()
This question already has an answer here:
Karate UI button click support
(1 answer)
Closed 2 years ago.
I am quite new to Karate UI automation and I have a front end UI that has a SVG element which when clicked brings a drop down.
When I am writing the UI test for it, I get javascript evaluation error and hence seek some advice/help.
Here are the screenshots of the UI element and its CSS locator clearly seen on the screen
This is how the CSS locator shows up for the SVG element
This uniquely identifies the SVG element(the plus button)
svg[class='svg-inline--fa fa-plus-square fa-w-14 ']
This is the part of code that I have written to click it
And click("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']")
And here is the error I get:
javascript evaluation failed: click("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']"), js eval failed twice:document.querySelector("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']").click(), error: {"type":"object","subtype":"error","className":"TypeError","description":"TypeError: Cannot read property 'click' of null\n at <anonymous>:1:78","objectId":"{\"injectedScriptId\":2,\"id\":3}"}
I tried various things that can uniquely identify the SVG element like using the compelete Xpath and also using the parent class name(though it was already unique with just the class name) but it still did not work. I tried wildcard locators as well but since there is no text/name of the element, it did not work. When the tags are say input or button etc the same way of css locator works but SVG ones did not for me.
tagname[unique_id of the element like key=value pair]
I am wondering if we need to use a different way to identify SVG elements using Karate UI? The same path when used in Selenium worked.
Since this is a UI that requires VPN connection and secure acccess, it may not be possible to provide a minimum code to try and replicate it. But am happy to provide more details if needed.
I have many such SVG elements on my UI and any help in this would be greatly appreciated.
Use selector hub as an extension to chrome, firefox, edge and opera. Ive only used with chrome and it worked fine and allowed me to quickly and easily find svg relative / absolute xpath. This worked no problems in a find and click capacity on numerous svg elements (via karate script)
2 suggestions.
Try to get some nearby element and work backwards: https://stackoverflow.com/a/63988977/143475
Figure out the location of the SVG and fire a mouse-click: https://stackoverflow.com/a/63828083/143475
Unable to give you specifics without a way to replicate, but - it should be possible to find a "pattern" so you can write a custom function as described in the docs. So that can be your goal, something like this:
* svgClick('svg-inline--fa')
specifically, I would like to test that the logo appears on the home page of the app. I guess I am not sure what I should use to look for the image.
I tried
it('has a logo', function () {
cy.visit('http://localhost:3000')
cy.get('img').should('contains' , 'My-Logo.png')
})
instead of cy.get I also tried to just use
cy.contains('My-Logo.png')
but it also fails.
I wasn't sure what element I should use or if I should be using get, but it fails. When I look at the source code for the web page, the logo is hidden within the javascript (nodeJS, vueJS,and expressJS application) and I noticed the javascript seems to add a sequence of numbers and letters to the image when I go to the image page even though the image name in the assets folder does not have it on there. My-Logo.d63b7f9.png.
I figured out the solution on my own.
cy.get('form').find('img').should('have.attr', 'src').should('include','My-Logo')
I inspected the element and found the <img src... line was embedded within a <form>. I could do a cy.get('form') and pass, but could not do a cy.get('img') to pass. So then I chained them together and it passed. I am not sure why I cannot just simply add the second should statement, but it failed when I tried to just run:
cy.get('form').find('img').should('include','My-Logo')
I am not entirely sure why, but it needed the first "should" statement. I got around VUE adding the sequence of numbers and letters by just asking for the name of the file without the extension. I hope this maybe helps someone else as the documentation did not seem to cover this.
you can use only one should statement like:
cy.get('form').find('img').should('have.attr', 'src', 'My-Logo')
the third arg of should is the value to match with the element attribute.
I'm trying to do some simple view testing in my Node.JS app using the Mocha testing framework...
For example, I want to test that the <ol> on the page has n <li> children, given the number of records I setup in my test.
I tried using Apricot to do this, and while I got it to work, when it fails the error messages are fantastically unhelpful... also, it doesn't always work.
What I'd love is a simple way to test the response body for HTML elements, so I can determine if they match the data they should be displaying.
Here's my test in it's current state: https://gist.github.com/2330685
Anyone know how I can do this?
Posting the comment as answer as well.
For DOM manipulation or element finding, I am suggesting the great library cheerio, which can load the html as string and then use jQuery-like selectors. Also it seems to be really lightweight. I replaced the JSDOM with request + cheerio combination.