(Solved) Using TestCafe - How to block a mobile web smart app banner from appearing?

554 Views Asked by Benny Meade At 06 March 2020 at 14:41

The webpage I'm testing shows an Apple smart app banner on iOS devices, using the following attributes in the HTML:

name="apple-itunes-app"
content="app-id=foobar"
rel="manifest"
href="/CompanyName/mobile/include/manifest.json"

But, I do not want this to be displayed. Normally, I would use TestCafe Request Mocker if there was a request involved, but this banner does not seem to use a request, it just appears! There are no manifest requests in the Networks tab.

How can I block the smart app banner either with TestCafe native features or any suitable Node package?

Solution (thanks to @Alex Kamaev help):

import { ClientFunction } from 'testcafe';

fixture `fixture`
    .page `http://localhost:8080`;

test.clientScripts({ content: `
    document.querySelector('meta[name="apple-itunes-app"]').remove();
` })(`test`, async t => {
    await t.wait(5000);
});

Original Q&A

There are 1 best solutions below

Alex Kamaev On 11 March 2020 at 11:09

You can try to remove the banner meta tag from your page using the ClientScripts mechanism. Please refer to the following article to get details: https://devexpress.github.io/testcafe/documentation/using-testcafe/common-concepts/inject-scripts-into-tested-pages.html

I prepared an example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Math Ninja iPhone/iPod Touch Game | Making Addition, Subtraction, Multiplication, and Division Fun!</title>
    <meta name="apple-itunes-app" content="app-id=370144476"/>
    <link rel="stylesheet" type="text/css" href="reset.css"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
</body>
</html>

Test code:

import { ClientFunction } from 'testcafe';

fixture `fixture`
    .page `http://localhost:8080`;


const removeBanner = ClientFunction(() => {
    var banner = document.querySelector('meta');

    banner.parentNode.removeChild(banner);
});

test.clientScripts({ content: `
    var banner = document.querySelector('meta');

    banner.parentNode.removeChild(banner);
` })(`test`, async t => {
    await t.wait(5000);
});

(Solved) Using TestCafe - How to block a mobile web smart app banner from appearing?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in IOS

Related Questions in TESTING

Related Questions in TESTCAFE

Related Questions in SMARTBANNER

Trending Questions

Popular # Hahtags

Popular Questions