Here I wanted to navigate to the h6 tag, from first div, so can anyone help me with the xpath or css using following sibling concept?
<div class="MuiCardHeader-root"></div>
<div class="MuiCardContent-root jss63568">
<h6 class="MuiTypography-root jss63569 null MuiTypography-subtitle2">Card-954-description</h6></div>
Related
i want to align my text verticaly with tailwind css and im stuck
you see the black line i want all my text to start there
<div class="w-60 bg-red-200 flex items-center flex-col">
<h1 class="">Loremipsm dolor.</h1>
<h1 class="">Lorem, hj dolor.</h1>
<h1 class="">Lom, ipolor.</h1>
<h1 class="">Lorem, ipsumolor.</h1>
</div>
Just wrap all h1 tags inside one div that would work look the example:
https://play.tailwindcss.com/m24PPlLUfH
If you using tailwind & flexboxes probably you should use class
justify-center
documentation about it
I'm totally new to programming. Currently trying to automate few daily tasks using selenium web driver on Python. I have a webpage which contains multiple + expand button. Below is the code
Without expansion:
<div class="expansion container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle"></button>
</div>
</div>
With expansion
<div class="expansion_container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle active"></button>
</div>
</div>
I'm unable to find this element using any of the find_by method
My colleague said the page contains json that's why unable to locate using find_by
Can somebody please help with the code to locate and click the expand button.
Actual page:
Go-to https://fortigate.fortidemo.com
Username demo
Password demo
Click login read-only
Click later in next window
Now navigate to Network > interfaces There you can see lot of expand button that's what I'm referring I have written code to come till this page, but I want to expand before taking screenshot of the page
It does not have to do anything with JSON.
See, you are saying
<div class="expansion container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle"></button>
</div>
</div>
that you see this HTML when expand button is present.
You can locate with below css :-
button.compact-visual-toggle
or xpath :
//button[contains(#class, 'compact-visual-toggle')]
and since you have mentioned that they are multiple expension button, you can differentiate like below :
(//button[contains(#class, 'compact-visual-toggle')])[1]
should represent the first, for second you can try :
(//button[contains(#class, 'compact-visual-toggle')])[2]
and so on.. for 3rd, 4th....
in code you can use it like this :
driver.find_element_by_xpath("//button[contains(#class, 'compact-visual-toggle')]").click()
or
driver.find_element_by_xpath("(//button[contains(#class, 'compact-visual-toggle')])[1]").click()
or
driver.find_element_by_xpath("(//button[contains(#class, 'compact-visual-toggle')])[2]").click()
Now, coming to second part :
<div class="expansion_container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle active"></button>
</div>
</div>
in you you want to un-expand it, you could use the below xpath :
//button[contains(#class, 'compact-visual-toggle active')]
and use it like above.
I am trying to getByRole where I have an <li />, which is a child of a styled component.
The styled component is by default display: none, then under a min-width media query it's set to display: flex.
Running getByRole('listitem') works without the display: none but not with it, indicating that styled-components is telling the DOM that because it is set to display: none it doesn't exist.
This is despite the debug HTML output actually showing the <li /> being rendered:
TestingLibraryElementError: Unable to find an accessible element with the role "listitem"
Here are the accessible roles:
document:
Name "":
<body />
--------------------------------------------------
<body>
<div>
<div>
<ul
class="sc-gzVnrw sc-VigVT kjwzNy"
>
<li><!-- bunch of stuff --></li>
</ul>
</div>
</div>
</body>
I have tried mocking the media query matching using jest-matchmedia-mock, with no luck.
I don't care about testing the media query or styles at all, so is there a way I can tell styled components to not apply the styles during testing?
I found a kind of solution which is a feature of dom-testing-library:
getByRole('listitem', { hidden: true })
This includes hidden items.
There is a commit detailing this change here: https://github.com/testing-library/dom-testing-library/pull/352/files/7cdfcfa466774ca78940330fe95d00c9e744b673
I want to get the href attributes from the given HTML code so that i can go inside the link and scrape some data from it.
<div class="cb-col cb-col-67 cb-rank-plyr"> <a class="text-hvr-underline text-bold cb-font-16" href="/profiles/1643/aaron-finch" title="Aaron Finch's Profile">Aaron Finch</a> <div class="cb-font-12 text-gray">AUSTRALIA</div> </div>
<div class="cb-col cb-col-67 cb-rank-plyr"> <a class="text-hvr-underline text-bold cb-font-16" href="/profiles/10863/fakhar-zaman" title="Fakhar Zaman's Profile">Fakhar Zaman</a> <div class="cb-font-12 text-gray">PAKISTAN</div> </div>
I want to get the attributes of href and save it to a list.
You can use regular expressions to parse out thinks in the HTML such as that href tag.
Here is an article explaining that: https://medium.com/#tracy_blog/regex-and-selenium-2c5a89f23a17
To accomplish this, I would consider using get_attribute(name) over a regular expression.
Using Framework7, I created a toolbar. It worked great for the iOS theme. However, when I tested it on the material theme, it was on the top. I found some Framework7 documentation that pointed me to the "toolbar-bottom" class. However, the page-content acted as if the toolbar was still on the top, and the padding-top property was incorrect. I would not like to hard code overrides on the Framework7 css.
Here is my structure:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="page-content">...</div>
<div class="toolbar toolbar-bottom">...</div>
</div>
TL;DR read the docs you dumb OP
See this documentation page. In order for the CSS to work correctly, the toolbar must be before the page-content. Your format should look like this:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="toolbar toolbar-bottom">...</div>
<div class="page-content">...</div>
</div>