Best Cypress way to check if a tab has become 'active`? - cypress

Try to do a simple test on the new UI page. It has 2 tabs: tab-pay and tab-vaca.
I could use cy.get(li:tab-vaca').focus() to get to this tab. How can I verify (assert) it's been in in active state then? And if possible, can I switch by toggle to one other tabs later? Thanks.

To check that the tab is diabled:
cy.get('li#tab-race > button').should('have.class', 'tab tab-inactive')
To go to either tabs:
cy.get('ul li').first().click() //go to gender tab
cy.get('ul li').next().click() //go to race tab

Related

Laravel dusk coming back to original browser tab or close latest tab but keep original

I have situation where I need to click the link and visit new tab and see if there is that particular text or not and then come back to original tab and perform some work.
this is the code I am using to confirm I am in latest browser tab after clicking view button
$window = collect($this->driver->getWindowHandles())->last();
$this->driver->switchTo()->window($window);
Now I have to come to original tab, How can i do that ? Any help?
is there any way to close recent tab after some time. so that i can come to original tab.
Thanks
You're on the right track.
You can continue with something like this:
$this->browse(function (Browser $browser) {
$browser->visit('/')->click('#some-link');
// switch to the last tab
$window = collect($browser->driver->getWindowHandles())->last();
$browser->driver->switchTo()->window($window);
// make some assertion on that tab
$browser->assertRouteIs('some-route.alias');
// switch back to first tab
$window = collect($browser->driver->getWindowHandles())->first();
$browser->driver->switchTo()->window($window);
// TODO: make further assertions
});

How to verify element displays in new window after clicking a link on the main window

I am using Cypress to click a link on the Homepage which opens the respective page in the new window. I am not able to identify any element on this page. I am doing this to verify that the click opens the correct page.
I saw the link: Access a new window - cypress.io which didn't help much to answer the problem.
Please suggest if there is some way to test this.
I have tried few things like:
cy.window().contains('.div.trItem')
cy.window().its('.trValue).should('eq','SomeHeading')
cy.url().should('include', '/theLink1.html/')
Expected:
- Clicking link open the correct page in new window
- Identify URL in new window includes some text
- Certain text displays on the new window
First of all, you can't access to another tab or window with Cypress. Consider to separate your test cases. For example, in one test you could check that a element contains href attribute with expected url and target attribute with _blank.
Like this:
it('contains valid a element', () => {
cy.visit('https://example.cypress.io/')
cy.contains('Cypress.io').should('have.attr', 'href', 'https://www.cypress.io').should('have.attr', 'target', '_blank')
})
And in second test check that your other page contains expected text.

Targeting a new tab in Selenium

I have a test which essentially will click a link on the footer of the page. We have three of them and they all lead to different places:
A Google Docs form
A training page
A licensing page
The code below makes the right assertions and clicks the link:
if #link_selection.eql?('leave feedback')
#wait.until {#driver.find_element(css: => 'cell.feedback').click}
#wait.until {#driver.find_element(css: => 'a[href="https://docs.google.com/a/showmyhomework.co.uk/forms/d/1LP8BZ950TSXXDR1HuVz7yhv9Cp3h6scmQtNFqIRW_XI/viewform"').click}
puts "Leave feedback link clicked"
I've modularised it for each different link location.
When the link is clicked, it naturally opens in a new browser tab. I then wanted to extend the test to then view the tab which was opened and then make an assertion on that page. I wanted to ask how I can handle a new tab in Selenium and the way in that:
a. It asserts that the new tab is open (and switches to it)
b. It can then assert a heading or title of the page (so that the test is sure that the page has been opened.
The following code in c#, please feel free to change it to ruby.
// This gets the window handles of open available windows(also, tabs)
var availableWindows= driver.WindowHandles;
To switch to the new tab with respect to the title of the page:
string Title= "whateveryourpagetitleis";
foreach (string windowId in availableWindows)
{
string windowTitle = driver.SwitchTo().Window(windowId).Title;
if (windowTitle.ContainsIgnoreCase(title))
{
driver.SwitchTo().Window(windowId);
}
}
You can play around with the functions and then use your asserts accordingly. But, what you're looking for is WindowHandles

How to write UI manual test case for longer webpage?

I'm to write UI test case for the homepage for a web application. the home page is very long. How to write Manual UI test cases for the home page? It's for http://www.jarviz.com
Can anyone help me with this? Thank you.
1) Try to divide web page to separate section/parts like a) Main Menu, b) Login/Sign Up, c) Make Your Move section d) Your applications, our platform etc.
2) Then for each part try to exclude single element. For example Main Menu button, or Login button, or Top Banner Control buttons.
3) Then write test cases for each element and action that you can do with the element.
Simple example:
Title: Pressing of the Main Menu button; Precondition: Web page should be opened; Steps to reproduce: Click on Main Menu button; Expected Result: Side Main Menu should be presented on the screen; Actual result: the same - Side Main Menu should be presented on the screen.
Try to use Google Sheets for your test cases.

iFrame tabbing within frame/pop-up window

As shown in the following example, I would like to restrict the tab key behavior to just this frame with links.
http://jsfiddle.net/zFXNM/
tabindex ="1"
I do NOT want the tab to go the URL other items in the browser.
For example, the "Compose Mail" in Gmail does this already. I observed 3 usages of "tabindex=-1" within the JS.
In pure JavaScript, I have figured out a solution for this issue. The idea is whenever the page is loaded we determine the first and last links, then we prevent the tab default action and jump to the first link from the last tab.
if (activeElement.id == lastHrefID) {
e.preventDefault();
document.getElementById(firstHrefID).focus();
}
A working solution is available at : https://jsfiddle.net/srirammac/95sv63s7/

Resources