CODEWITHSUNDEEP
testingautomationautomated-testse2e-testingtestcafe
Deepthi
Deepthi

Reputation: 13

Does TestCafe support multiple tab testing

I have a scenario where clicking on a button opens a new tab but when I try with testCafe it opens in a new window instead of new tab.Why is this ? Doesn’t testCafe support new tab scenarios?

Upvotes: 1

Views: 3592

Answers (1)

pavelsaman
pavelsaman

Reputation: 8322

I think using multiple tabs is not really necessary. Usually people try to test that a link opens up in a new tab, but why?

<a class="c-cookie-bar__text-link" target="_blank" href="/private-data-info">More information</a>

You know that a link with target="_blank" will open up in a new tab. This is nothing that would be programmed by your team, this is how a browser works. Just every imaginable browser behaves the same if it encounters this attribute in a link. It's been tested, you don't need to retest it on your website.

However, you still might need to test that the target content loads or that the link looks the way you want. That's ok, but you don't need multiple tabs for that. The following scenarios make sense:

  1. check that the link has the target="_blank" attribute:
test             
    ('Check Target Attr', async t => {
        
        await t
            .expect(Selector('.c-cookie-bar__text-link').withAttribute('target', '_blank').exists)
                .ok();
});
  1. check that the href attr is what it should be:
test             
    ('Check Href Attr', async t => {
        
        await t
            .expect(Selector('.c-cookie-bar__text-link').getAttribute('href'))
                .eql('/private-data-info');
});
  1. check that the content loads in the same tab:
import getBaseUrl from '../Helpers/baseUrl';
import { Selector } from 'testcafe';

const baseUrl = getBaseUrl();

fixture `Link Handling`    
    .page(baseUrl); 

test             
    ('Go To Resource', async t => {
        
        const resource = await Selector('.c-cookie-bar__text-link')
            .getAttribute('href');
        await t
            .navigateTo(baseUrl + resource);
            // possibly some other assertions follow
});
  1. check the http status code (I use axios here, but it's not all visible in my example):
import getBaseUrl from '../Helpers/baseUrl';
import { Selector } from 'testcafe';
import request from '../Helpers/networkRequest';

const baseUrl = getBaseUrl();

fixture `Link Handling`    
    .page(baseUrl);   

test             
    ('Check Status Code', async t => {
        
        const resource = await Selector('.c-cookie-bar__text-link')
            .getAttribute('href');
        const networkReq = await request({
            method: 'GET',
            url: baseUrl + resource
        });

        await t
            .expect(networkReq.status).eql(200);
});

If you actually ignore all this and just click the link in TestCafe:

await t
    .click(Selector('.c-cookie-bar__text-link'));

it will be opened in a new window like so:

enter image description here

Upvotes: 3

Related Questions