$this->browse(function (Browser $browser) {
$browser->click('.md-button:nth-child(2)');
});
I want to click the class element 2. How to get nth-child class in laravel dusk.
Sometimes using Dusk to select certain elements can be tricky. It can be done by using the script method as a workaround which doesn't appear in the documentation as a far as I can see. You can then execute any JavaScript inside to select any element you like. jQuery makes this easy.
Try using:
$browser->script('$(".md-button:nth-child(2)").click();');
You can always do this by copying the css selector via your browser's dev tools. Where you right click on the element you want, then click inspect element, then when the developer tools window shows up, right click on the HTML element in the dev tools window, and select copy > copy selector, and then paste into your IDE where you're writing the test. This is a test I've run successfully as an example:
$this->browse(function (Browser $browser) {
$browser->visit(new UniversityCoursesListingPage)
->assertVisible('.course-list-content')
->assertVisible('.form-control')
->select('.course-filter select', 'title|desc')
->assertSeeIn('div:nth-child(1) > article > a > h3', 'Whitepaper Training')
->clickLink('My Account');}
Related
I've been attempting to web scape some detail from the following website, but I'm unable to figure out how to access the class, id, and class type for the following object below.
https://mor.nlm.nih.gov/RxClass/search?query=H%7CATC1-4&searchBy=class&sourceIds=&drugSources=atc1-4%7Catc%2Cepc%7Cfdaspl%2Cmeshpa%7Cmesh%2Cdisease%7Cndfrt%2Cchem%7Cfdaspl%2Cmoa%7Cfdaspl%2Cpe%7Cfdaspl%2Cpk%7Cndfrt%2Cva%7Cndfrt%2Cdispos%7Csnomedct%2Cstruct%7Csnomedct
On the following website with the search condition you'll see in the center of the screen it
class: SYSTEMIC HORMONAL PREPARATIONS, EXCL. SEX HORMONES AND INSULINS / id: H / class type: ATC1-4 / show context
I'd like to make the assumption that the above is in bold is a CSS_Selector, but I can't seem to locate it.
Any guidance on how to locate the class, element, or css_selector would be much appreciated.
You can use the developer console in Firefox or any Chromium-based browser: open the contextmenu on the element you want and select Inspect. Then the developer console should open. The current element should be focused in the DOM tree. There you should have the option Copy > CSS selector. And you're done. In your current case the path is something like this:
html body div.container-fluid div.col-sm-9.col-sm-offset-3.col-md-9.col-md-offset-3.main div#tabContent.tab-content div#drugMemberPane.tab-pane.active div#drugMemberPage.table-responsive div.propText strong
Request:
Either with Cypress (preferably) or using extending Cypress with Puppeteer via cy.task(), being able to perform a test on a system-generated popup menu?
This popup menu element cannot be inspected by Chrome Devtools and is thereby not navigatable by either CSS selectors or XPath.
Details: I am using Cypress for UX testing and extend in limited cases with custom cy.task() with Puppeteer.
The web page under test has a dropdown selection that generates a popup menu, source is this npm module:
npm react-select-async-paginate
Under inspections, the popup menu is generated from an and it has these two attributes:
aria-haspopup="true"
role="combobox"
Appreciate assistance, thank you
22 Feb, Updated
This is the generated react-select-async-paginate:
<div>
<div class="***-singleValue">Offer Letter w/ Signature</div>
<div class=" css-ackcql" data-value="">
<input
id="react-select-2-input"
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
aria-controls="react-select-2-listbox"
aria-owns="react-select-2-listbox"
role="combobox">
</div>
</div>
This is the attempt for selecting an option, but it does not loads selected option into <div class="***-singleValue">.
This Cypress script selects an option:
cy.get(`${selectorReactSelectPaginate}`)
.find('input[role="combobox"]')
.focus()
.type($valueSelect, { force: true })
.then(() => {
cy.wrap(true);
});
As would able to validated using this Cypress script:
cy.get(selectorReactSelectPaginate)
.find('div[class*="-singleValue"]')
.contains($valueSelectContains)
.then(() => {
cy.wrap(true);
});
Yes, the option list is tricky to get at in devtools because of the blur event (which comes from the library itself). One approach is open devtools and watch carefully as you click open the select.
Using react-select-async-paginate - Simple Example, when I click open the select I can see this div appearing and disappearing
<div id="react-select-2-listbox">
So I can use Cypress to get a look inside that
cy.get('[role="combobox"]').click()
cy.get('#react-select-2-listbox')
.then($listbox => {
console.log($listbox)
})
Now in devtools console, check out children property (has one child), then the child's children - these look like the options to be tested.
The common selector is an id starting with react-select-2-option, so I can test like so
cy.get('[role="combobox"]').click()
cy.get('#react-select-2-listbox')
.find('[id^="react-select-2-option"]') // all div's with id starting react-select-2-option
.should('have.length', 10)
.eq(3) // check out the 4th option
.invoke('text')
.should('eq', 'Option 4') // passes
Selecting an option by typing into the box
Two things affect this method of selecting
the dropdown list changes (reloads) as you type characters
the element 'div[class*="-singleValue"]' only appears after you confirm the typed value (either enter key or blur(), I'm not sure which).
This worked for me
// Type in the option
cy.get(selectorReactSelectPaginate)
.find('[role="combobox"]')
.type(valueToSelect)
// Wait for the listbox to respond
cy.get('#react-select-2-listbox')
.should('contain', valueToSelect)
// Blur or enter will set the value
cy.get(selectorReactSelectPaginate)
.find('[role="combobox"]')
.type('{enter}')
.blur()
// Check the value
cy.get(selectorReactSelectPaginate)
.find('div[class*="-singleValue"]')
.should('contain', valueToSelect)
A neat trick with test runner is to add a .wait() after the dropdown selection appears. A snapshot of the DOM will be created and you can click on the .wait() to view the snapshot and use dev tools to inspect the dropdown selection.
I'm struggling to get consistent results using Laravel Dusk to send emails
via logging into Gmail and navigating to the "COMPOSE" button since the elements ID and class is being dynamically changed on page reload.
I have tried using inspect element and copying the selector with no luck.
The purpose of this exercise is just to get a better understanding of Laravel Dusk and have some fun while going about it.
My code below:
public function testGmailExample()
{
$this->browse(function (Browser $browser) {
$browser->visit('http://gmail.com')
->assertSee('Gmail')
->type('Email', 'myemail#gmail.com')
->pause(1000)
->press('#next')
->pause(1000)
->assertSee('myemail#gmail.com')
->type('#Passwd', 'myPassword')
->press('#signIn')
->waitFor('#\3a xy > div > div', 10)
->click('#\3a xy > div > div')
->pause(1000)
->type('to', 'an_excited_friends_email#gmail.com')
->type('subjectbox','Laravel Dusk is Awesome')
->click('Send')
->pause(3000);
//Only had one success with the above code, would prefer consistent results
});
}
Any help will be greatly appreciated.
You can use clickLink() for that :
$browser->clickLink('COMPOSE');
From the documentation :
To click a link, you may use the clickLink method on the browser instance. The clickLink method will click the link that has the given display text
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.
I'm sure this question is out there but I cannot find it:
Is there a tool that can get one element of my HTML document and export that element, all its parents and all its associated CSS but nothing else?
EDIT:
Sorry I was not clear enough. I don't mean that I want Firebug/DevTools, I mean a tool [that maybe a feature of some kind of in-browser] that outputs all the relevant HTML/CSS for the selected element into a self contained file / to the clipboard.
EDIT2:
When I say outputs all relevent HTML/CSS I mean that I want that element and all it's css rules, and then each parent element with their css rules all the way up to . What I would get as an output would be enough HTML/CSS to open as a standalone page and have the target element rendered and effected by all relevant CSS rules.
Yes, there is a tool/s and ways to do that.
First, with Chrome extension, you can install SnappySnippet from Chrome Web Store. It allows easy HTML+CSS extraction from the specified (last inspected) DOM node. Additionally, you can send your code straight to CodePen or JSFiddle.
Second, CSS Used, other Chrome extension, for extracting CSS with children CSSs.
And third, without extension, if you want CSS embedded in HTML or above extensions is not working for you, you can use any Webkit based browser (like Chrome or Firefox) to run script in console which will add all css to html element and you can easily just copy OuterHTML and it will work anywhere.
var el = document.querySelector(“#yourId”); // change yourId to id of your element, or you can write “body” and it will convert all document
var els = el.getElementsByTagName("*");
for(var i = -1, l = els.length; ++i < l;){
els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);
}
So, just copy this code to Console (Right click on page->Inspect->Console), change yourid to yourid or set it to "body", run it and then right click on your element and "copy outerHTML"
Do you mean something like Firebug ( Firefox addon )? Or the Debug bar in Chrome ( Press F12 in the browser )?
In Chrome:
Press F12
Click on the loop in the bottom left.
Click on the element
Now you can see all the style.
In the big window you can see other element, and the element under
it.
In chrome, you can right click the page, and then select "inspect element" to view the html code of the page (but in the browser). Then, right click on the element that you want to export, and select "copy as html". Paste it into whatever editor you like. Hope this helps.
Press F12 or right click and go "inspect element" then select element to get the HTML code for the current webpage. Once at that point click the magnifying glass to the left and click on an element of the page using that, that will show you the code used for that specific element, after that you can right click and select "Copy Html" or you can go "Edit as Html" and then copy the code.
You can try to use a tool like Site Sucker for this. I've used it to grab entire websites, but there are settings available that might limit to what you're looking for.
Great question - it was alive and kicking for me today :-)!
Building on the accepted answer (thank you for that!) and this answer, I've got:
var el = document.querySelector("#question > div.post-layout > div.postcell.post-layout--right > div.s-prose.js-post-body"); // change yourId to id of your element, or you can write “body” and it will convert all document
var els = el.getElementsByTagName("*");
for(var i = -1, l = els.length; ++i < l;){
el = els[i]
s = getComputedStyle(el)
for (let styleKey in el.style) {
for (let computedStyleKey in s) {
let computedStyleKeyCamelCase = computedStyleKey.replace(/\-([a-z])/g, v => v[1].toUpperCase());
if ((typeof el.style[styleKey] != "function") && (styleKey != 'cssText')){
if(styleKey == computedStyleKeyCamelCase) {
el.style[styleKey] = s[computedStyleKey];
}
}
}
}
}
P.S.:
The above code should run in the Developer Tools (F12) console (tried it in Chrome) and it will add the inline style to each element
After running you could right click and do Copy / OuterHTML