← back to Dw Search Toolbar Mockup

shots/shoot.js

24 lines

const { chromium } = require('/Users/macstudio3/.npm-global/lib/node_modules/playwright');
const OUT = '/Users/macstudio3/Projects/dw-search-toolbar-mockup/shots';
const BASE = 'https://designer-laboratory-sandbox.myshopify.com/search?q=red';
const PREVIEW = BASE + '&preview_theme_id=144230645811';

async function shoot(browser, url, name){
  const ctx = await browser.newContext({ viewport:{width:1440,height:1000}, deviceScaleFactor:2, userAgent:'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)'});
  const page = await ctx.newPage();
  await page.goto(url, { waitUntil:'domcontentloaded', timeout:60000 });
  // wait for Boost toolbar / product list to build
  try { await page.waitForSelector('.boost-sd__product-list, .boost-sd__toolbar', { timeout:35000 }); } catch(e){ console.log(name,'no boost selector'); }
  await page.waitForTimeout(6000); // let JS-injected pills mount + settle
  await page.screenshot({ path:`${OUT}/${name}-full.png`, clip:{x:0,y:0,width:1440,height:620} });
  await ctx.close();
  console.log('shot:', name);
}

(async () => {
  const browser = await chromium.launch({ channel:'chrome', headless:true });
  await shoot(browser, BASE, 'A-live');
  await shoot(browser, PREVIEW, 'B-compact');
  await browser.close();
})().catch(e=>{ console.error('ERR', e.message); process.exit(1); });