Установить элементы localalstorage до загрузки страницы в кукловод?

Question

Установить элементы localalstorage до загрузки страницы в кукловод?

6

У нас есть некоторая логика маршрутизации, которая отправляет вас на главную страницу, если у вас нет набора JWT_TOKEN... Я хочу установить это до того, как страница загрузится/до вызова js.

Как мне это сделать?

christoffee 10 авг. 2018, в 16:48

Источник

Теги:

javascript

puppeteer

local-storage

3 ответа

Ещё вопросы

Everettss · Answer 1 · 2018-08-11T10-58-00.000Z

Вы должны зарегистрировать элемент localStorage следующим образом:

await page.evaluate(() => {
  localStorage.setItem('token', 'example-token');
});

Вы должны сделать это после страницы page.goto - браузер должен иметь URL-адрес для регистрации на нем локального элемента хранилища. После этого введите одну и ту же страницу еще раз, этот токен должен быть здесь до загрузки страницы.

Вот полный рабочий пример:

const puppeteer = require('puppeteer');
const http = require('http');

const html = '
<html>
  <body>
    <div id="element"></div>

    <script>
      document.getElementById('element').innerHTML = 
        localStorage.getItem('token') ? 'signed' : 'not signed';
    </script>
  </body>
</html>';

http
  .createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.write(html);
    res.end();
  })
  .listen(8080);

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('http://localhost:8080/');

  await page.evaluate(() => {
    localStorage.setItem('token', 'example-token');
  });

  await page.goto('http://localhost:8080/');

  const text = await page.evaluate(
    () => document.querySelector('#element').textContent
  );

  console.log(text);
  await browser.close();

  process.exit(0);
})();

markdon · Answer 2 · 2019-05-15T01-58-00.000Z

Есть некоторые обсуждения этого в вопросах Puppeteer GitHub.

Вы можете загрузить страницу в домене, установить свой localStorage, а затем перейти на фактическую страницу, которую хотите загрузить, с готовым localStorage. Вы также можете перехватить первую загрузку URL-адреса, чтобы немедленно вернуться к ней, вместо того, чтобы загружать страницу, что потенциально экономит много времени.

const doSomePuppeteerThings = async () => {
  const url = 'http://example.com/';
  const browser = await puppeteer.launch();
  const localStorage = { storageKey: 'storageValue' };
  setDomainLocalStorage(browser, url, localStorage);

  const page = await browser.newPage();
  // do your actual puppeteer things now
};

const setDomainLocalStorage = async (browser, url, values) => {
  const page = await browser.newPage();
  await page.setRequestInterception(true);
  page.on('request', r => {
    r.respond({
      status: 200,
      contentType: 'text/plain',
      body: 'tweak me.',
    });
  });
  await page.goto(url);
  await page.evaluate(values => {
    for (const key in values) {
      localStorage.setItem(key, values[key]);
    }
  }, values);
  await page.close();
};

Andrew Kim · Answer 3 · 2018-08-10T13-44-00.000Z

Попробуйте и добавьте тег скрипта. Пример:

Скажем, у вас есть сценарий main.js котором содержится ваша логика маршрутизации.

Затем скрипт setJWT.js котором размещена ваша логика токена.

Затем в вашем html, который загружается, эти сценарии упорядочивают их следующим образом:

<script src='setJWT.js'></script>
<script src='main.js'></script>

Это было бы полезно только для начального старта страницы.

Однако в большинстве библиотек маршрутизации обычно есть система захвата событий, которую вы можете подключить до того, как будет отображаться маршрут. Я бы setJWT логику setJWT где-то в этом setJWT.

Этот ответ не имеет ничего общего с Кукольником :(