question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Window blur and focus events in headful/headless mode

See original GitHub issue

Puppeteer doesn’t have any page method to simulate or dispatch blur and focus window events.

I was trying to evaluate window.focus(); and window.blur(); but event was not fired.

I was trying to dispatch:

const event = document.createEvent('Event');
event.initEvent('blur', true, false);
window.dispatchEvent(event);

Of course event is not trusted after manual dispatching.

After my PR we have bringToFront method, which can help with focus in headful, but what about headless. Any suggestions or ideas?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:9
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
schelkuncommented, Jan 10, 2018

@maxwellllll this method is not working in headless.

const puppeteer = require('puppeteer');

(async() => {
    try {
        const browser = await puppeteer.launch({
            headless: false,
            timeout: 10000
        });

        const page = await browser.newPage();

        await page.setViewport({
            width: 1280,
            height: 800
        });

        await page.goto('https://schelkun.github.io/padding-link/');

        await page.evaluate(() => {
            window.addEventListener('visibilitychange', (event) => {
               let c = document.createElement('code');
               c.style.display = 'block';
               c.textContent = 'Event fired!';
               document.body.appendChild(c);
            });
        });

        const selectorWaiter = new Promise(async (resolve, reject) => {
            await page.waitForSelector('code');
            console.log('Code tag exist!');
            resolve();
        });

        const targetChanger = new Promise(async (resolve, reject) => {
            await browser._connection.send('Target.activateTarget', {
                targetId: page._client.targetId()
            });
            console.log('Target changed back!');
            resolve();
        });

        await browser.newPage();

        await Promise.all([selectorWaiter, targetChanger]);
    } catch (e) {
        console.log(e);
    }
})();

Try to execute with headless true and false. visibilitychange is not working at headless at all.

6reactions
lixiaolihuacommented, Apr 8, 2018

+1

Read more comments on GitHub >

github_iconTop Results From Across the Web

Window blur and focus events in headful/headless mode #1462
I was trying to evaluate window.focus(); and window.blur(); but event was not fired. I was trying to dispatch: const event ...
Read more >
Window: blur event - Web APIs | MDN
The blur event fires when an element has lost focus. The opposite of blur is focus . This event is not cancelable and...
Read more >
Focusing: focus/blur - The Modern JavaScript Tutorial
The focus event is called on focusing, and blur – when the element loses the focus. Let's use them for validation of an...
Read more >
Input focus and blur firing when window gets focus
I really need the focus() and blur() events not to fire when the window regains focus as it causes a div to quickly...
Read more >
Javascript Window Blur() and Window Focus() Method
Javascript Window Blur() method is used to remove focus from the current window. i.e, It sends the new open Window to the background....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found