@matware/e2e-runner 1.2.1 → 1.3.1

package/templates/dashboard/js/utils.js

@@ -0,0 +1,216 @@
+/* ── DOM Helpers ── */
+var $=function(s){return document.querySelector(s)};
+var $$=function(s){return document.querySelectorAll(s)};
+
+function el(tag,a,ch){
+  var e=document.createElement(tag);
+  if(a)Object.keys(a).forEach(function(k){
+    if(k==='className')e.className=a[k];
+    else if(k==='style')e.style.cssText=a[k];
+    else if(k.indexOf('on')===0)e.addEventListener(k.slice(2),a[k]);
+    else e.setAttribute(k,a[k]);
+  });
+  if(typeof ch==='string')e.textContent=ch;
+  else if(Array.isArray(ch))ch.forEach(function(c){if(c)e.appendChild(c)});
+  return e;
+}
+function css(n){return n.replace(/[^a-zA-Z0-9\-_]/g,'_')}
+function dur(ms){return ms>=1000?(ms/1000).toFixed(1)+'s':ms+'ms'}
+function fdate(iso){return iso?new Date(iso).toLocaleString():'--'}
+
+function prettyJson(str){
+  if(!str)return '';
+  try{return JSON.stringify(JSON.parse(str),null,2)}catch(e){return str}
+}
+
+function fmtHeaders(h){
+  if(!h||typeof h!=='object')return '';
+  return Object.keys(h).map(function(k){return k+': '+h[k]}).join('\n');
+}
+
+function buildHeaderKV(h){
+  if(!h||typeof h!=='object') return el('div',{className:'rd-nd-empty'},'No data');
+  var table=el('div',{className:'rd-hdr-table'});
+  Object.keys(h).forEach(function(k){
+    var row=el('div',{className:'rd-hdr-row'});
+    row.appendChild(el('span',{className:'rd-hdr-key'},k));
+    row.appendChild(el('span',{className:'rd-hdr-val'},String(h[k])));
+    table.appendChild(row);
+  });
+  return table;
+}
+
+function makeCopyBtn(getTextFn){
+  var btn=el('span',{className:'copy-btn',onclick:function(e){
+    e.stopPropagation();
+    var text=typeof getTextFn==='function'?getTextFn():String(getTextFn);
+    navigator.clipboard.writeText(text).then(function(){
+      btn.textContent='\u2713 Copied';
+      btn.classList.add('copied');
+      setTimeout(function(){btn.textContent='\u2398 Copy';btn.classList.remove('copied')},1200);
+    });
+  }},'\u2398 Copy');
+  return btn;
+}
+
+function buildNdSection(title,contentEl,count,copyText){
+  var toggle=el('div',{className:'rd-nd-toggle'},[
+    el('span',{className:'nd-arrow'},'\u25B6'),
+    el('span',null,title),
+    count?el('span',{className:'nd-count'},count+' entries'):null,
+    makeCopyBtn(copyText||function(){return contentWrap.textContent})
+  ]);
+  var contentWrap=el('div',{className:'rd-nd-content'});
+  contentWrap.appendChild(contentEl);
+  toggle.addEventListener('click',function(e){
+    e.stopPropagation();
+    toggle.classList.toggle('open');
+  });
+  return el('div',{className:'rd-nd-section'},[toggle,contentWrap]);
+}
+
+function gqlOp(n){
+  if(n.requestBody){
+    try{
+      var b=JSON.parse(n.requestBody);
+      if(b.operationName)return b.operationName;
+      if(b.query){var m=b.query.match(/^(?:query|mutation|subscription)\s+([A-Za-z_]\w*)/);if(m)return m[1]}
+    }catch(e){}
+  }
+  if(n.url){
+    try{var u=new URL(n.url,location.href);var op=u.searchParams.get('operationName');if(op)return op}catch(e){}
+  }
+  return null;
+}
+
+function buildNetRow(n){
+  var mCls='rd-net-method '+(n.method||'GET').toLowerCase();
+  var sCode=n.status||0;
+  var sCls='rd-net-status '+(sCode<300?'s2xx':sCode<400?'s3xx':sCode<500?'s4xx':'s5xx');
+  var hasDetail=n.requestBody||n.responseBody||n.requestHeaders||n.responseHeaders;
+  var rowCls='rd-net-row'+(sCode>=400?' has-error':'');
+  var opName=gqlOp(n);
+  var children=[
+    el('span',{className:'rd-net-expand'},hasDetail?'\u25B6':''),
+    el('span',{className:mCls},n.method||'GET'),
+    el('span',{className:sCls},String(sCode))
+  ];
+  if(opName)children.push(el('span',{className:'rd-net-op'},opName));
+  children.push(el('span',{className:'rd-net-url'},n.url||''));
+  children.push(makeCopyBtn(n.url||''));
+  children.push(el('span',{className:'rd-net-dur'},dur(n.duration)));
+  var row=el('div',{className:rowCls},children);
+  var detail=null;
+  if(hasDetail){
+    var sections=[];
+    if(n.requestHeaders){
+      var hCount=Object.keys(n.requestHeaders).length;
+      sections.push(buildNdSection('Request Headers',buildHeaderKV(n.requestHeaders),hCount,fmtHeaders(n.requestHeaders)));
+    }
+    if(n.requestBody){
+      var rbText=prettyJson(n.requestBody);
+      sections.push(buildNdSection('Request Body',el('pre',null,rbText),null,rbText));
+    }
+    if(n.responseHeaders){
+      var rhCount=Object.keys(n.responseHeaders).length;
+      sections.push(buildNdSection('Response Headers',buildHeaderKV(n.responseHeaders),rhCount,fmtHeaders(n.responseHeaders)));
+    }
+    if(n.responseBody){
+      var respText=prettyJson(n.responseBody);
+      sections.push(buildNdSection('Response Body',el('pre',null,respText),null,respText));
+    }
+    detail=el('div',{className:'rd-net-detail'},sections);
+    row.addEventListener('click',function(e){e.stopPropagation();row.classList.toggle('open')});
+  }
+  return {row:row,detail:detail};
+}
+
+/* ── Screenshot hash helpers ── */
+var ssHashCache={};
+async function ssHash(filePath){
+  if(ssHashCache[filePath])return ssHashCache[filePath];
+  var data=new TextEncoder().encode(filePath);
+  var buf=await crypto.subtle.digest('SHA-256',data);
+  var hex=Array.from(new Uint8Array(buf)).map(function(b){return b.toString(16).padStart(2,'0')}).join('');
+  var h=hex.slice(0,8);
+  ssHashCache[filePath]=h;
+  return h;
+}
+function ssHashSync(filePath){return ssHashCache[filePath]||null}
+function copyHash(hash,badge){
+  navigator.clipboard.writeText('ss:'+hash).then(function(){
+    badge.classList.add('copied');
+    setTimeout(function(){badge.classList.remove('copied')},1200);
+  });
+}
+function createHashBadge(hash){
+  var badge=el('span',{className:'ss-hash',onclick:function(e){e.stopPropagation();copyHash(hash,badge)}},[
+    el('span',{className:'ss-icon'},'\u2318'),
+    document.createTextNode('ss:'+hash)
+  ]);
+  return badge;
+}
+
+function createTriggerBadge(source){
+  var s=source||'unknown';
+  var labels={dashboard:'Dashboard',mcp:'MCP',cli:'CLI',unknown:'--'};
+  var icons={dashboard:'\u{1F464}',mcp:'\u{1F916}',cli:'>_',unknown:'\u2022'};
+  var badge=el('span',{className:'trigger-badge src-'+s},[
+    el('span',{className:'trig-icon'},icons[s]||icons.unknown),
+    document.createTextNode(labels[s]||s)
+  ]);
+  return badge;
+}
+
+function createDriverBadge(driver){
+  if(!driver)return document.createTextNode('--');
+  var labels={browserless:'Browserless',cdp:'CDP',steel:'Steel',auto:'Auto'};
+  var colors={browserless:'var(--accent)',cdp:'var(--purple)',steel:'var(--amber)'};
+  var icons={browserless:'\u{1F310}',cdp:'\u{1F50C}',steel:'\u{1F6E1}'};
+  // Handle multi-driver (e.g. "browserless,steel")
+  var parts=driver.split(',');
+  if(parts.length>1){
+    var wrap=el('span',{style:'display:inline-flex;gap:4px'});
+    parts.forEach(function(d){wrap.appendChild(createDriverBadge(d.trim()))});
+    return wrap;
+  }
+  var d=driver.trim();
+  var badge=el('span',{className:'driver-badge drv-'+d,style:'color:'+(colors[d]||'var(--text3)')},[
+    el('span',{className:'drv-icon'},icons[d]||'\u2699'),
+    document.createTextNode(labels[d]||d)
+  ]);
+  return badge;
+}
+
+/* ── Pool Distribution Summary ── */
+var POOL_COLORS=['#6366f1','#22d3ee','#f59e0b','#10b981','#ef4444','#8b5cf6','#ec4899','#14b8a6'];
+function buildPoolDistribution(tests){
+  var pools={};var total=0;
+  Object.keys(tests).forEach(function(n){
+    if(n==='__error')return;var t=tests[n];
+    if(!t.poolUrl)return;
+    var label=t.poolUrl.replace('ws://','').replace('wss://','');
+    if(!pools[label])pools[label]={count:0,passed:0,failed:0};
+    pools[label].count++;total++;
+    if(t.status==='passed'||t.success)pools[label].passed++;
+    if(t.status==='failed'||t.success===false)pools[label].failed++;
+  });
+  var keys=Object.keys(pools);
+  if(keys.length<2)return null;
+  var bar=el('div',{className:'pool-dist'});
+  var legend=el('div',{className:'pool-dist-legend'});
+  keys.forEach(function(k,i){
+    var pct=Math.round(pools[k].count/total*100);
+    var color=POOL_COLORS[i%POOL_COLORS.length];
+    var seg=el('div',{className:'pool-dist-seg'});
+    seg.style.flex=pools[k].count;seg.style.background=color;
+    seg.textContent=k+' ('+pools[k].count+')';
+    bar.appendChild(seg);
+    var lg=el('span',{},k+': '+pools[k].count+' tests ('+pct+'%)');
+    lg.style.cssText='display:inline-flex;align-items:center;gap:4px';
+    var dot=el('span',{});dot.style.cssText='width:8px;height:8px;border-radius:2px;background:'+color+';flex-shrink:0';
+    lg.insertBefore(dot,lg.firstChild);
+    legend.appendChild(lg);
+  });
+  return el('div',{style:'padding:4px 12px'},[bar,legend]);
+}

package/templates/dashboard/js/view-live.js

@@ -0,0 +1,181 @@
+/* ══════════════════════════════════════════════════════════════════
+   Live Execution View
+   ══════════════════════════════════════════════════════════════════ */
+function clearFinishedLiveRuns(){for(var k in S.liveRuns){if(S.liveRuns[k].done||!S.liveRuns[k].on)delete S.liveRuns[k]}S.screencastTest=null;renderLive()}
+function dismissLiveRun(rid){delete S.liveRuns[rid];renderLive()}
+$('#liveClearBtn').addEventListener('click',clearFinishedLiveRuns);
+
+// Screencast state
+S.screencastTest=null;
+
+$('#screencastSelect').addEventListener('change',function(){
+  S.screencastTest=this.value||null;
+  var img=$('#screencastImg'),ph=$('#screencastPlaceholder');
+  if(S.screencastTest){img.style.display='block';ph.style.display='none';img.src=''}
+  else{img.style.display='none';ph.style.display='flex'}
+});
+
+function updateScreencastSelect(){
+  var sel=$('#screencastSelect'),panel=$('#screencastPanel');
+  var runningTests=[];
+  for(var k in S.liveRuns){var r=S.liveRuns[k];for(var n in r.tests){if(n!=='__error'&&r.tests[n].status==='running')runningTests.push(n)}}
+  // Show panel if any run is active
+  var anyActive=false;for(var k2 in S.liveRuns)if(S.liveRuns[k2].on)anyActive=true;
+  panel.style.display=anyActive?'':'none';
+  // Rebuild options
+  var prev=sel.value;
+  while(sel.options.length>1)sel.remove(1);
+  runningTests.forEach(function(n){var o=document.createElement('option');o.value=n;o.textContent=n;sel.appendChild(o)});
+  // Auto-select first running test if nothing selected
+  if(!S.screencastTest&&runningTests.length>0){S.screencastTest=runningTests[0];sel.value=S.screencastTest;$('#screencastImg').style.display='block';$('#screencastPlaceholder').style.display='none'}
+  else if(S.screencastTest&&runningTests.indexOf(S.screencastTest)===-1){
+    // Current test finished — pick next running or clear
+    if(runningTests.length>0){S.screencastTest=runningTests[0];sel.value=S.screencastTest}
+    else{S.screencastTest=null;sel.value='';$('#screencastImg').style.display='none';$('#screencastPlaceholder').style.display='flex';$('#screencastPlaceholder').textContent='No running tests'}
+  }
+  else{sel.value=S.screencastTest||''}
+}
+
+function renderLive(){
+  var panel=$('#livePanel'),grid=$('#liveTests'),navLive=$('#navLive'),liveEmpty=$('#liveEmpty');
+  var runs=S.liveRuns;var runIds=Object.keys(runs);
+
+  if(runIds.length===0){panel.classList.remove('active');navLive.style.display='none';liveEmpty.style.display='block';$('#liveClearBtn').style.display='none';return}
+
+  navLive.style.display='';liveEmpty.style.display='none';panel.classList.add('active');
+
+  var gTotal=0,gCompleted=0,gPassed=0,gFailed=0,gActive=0,gRunning=false,gDone=true;
+  runIds.forEach(function(rid){var r=runs[rid];gTotal+=r.total;gCompleted+=r.completed;gPassed+=r.passed;gFailed+=r.failed;gActive+=r.active;if(r.on)gRunning=true;if(!r.done)gDone=false});
+
+  var badgeActive=0;
+  runIds.forEach(function(rid){var r=runs[rid];Object.keys(r.tests).forEach(function(n){if(n!=='__error'&&r.tests[n].status==='running')badgeActive++})});
+  $('#liveBadge').textContent=gRunning?badgeActive:gCompleted;
+  $('#liveBadge').style.background=gRunning?'var(--purple-dim)':gFailed>0?'var(--red-dim)':'var(--green-dim)';
+  $('#liveBadge').style.color=gRunning?'var(--purple)':gFailed>0?'var(--red)':'var(--green)';
+
+  $('#liveTotal').textContent=gTotal;$('#livePass').textContent=gPassed;$('#liveFail').textContent=gFailed;$('#liveActive').textContent=gActive;
+  $('#liveProgressFill').style.width=(gTotal>0?gCompleted/gTotal*100:0)+'%';
+  $('#liveProject').style.display='none';
+
+  var hasFinished=runIds.some(function(rid){return runs[rid].done||!runs[rid].on});
+  $('#liveClearBtn').style.display=hasFinished?'inline-block':'none';
+
+  var lbl=panel.querySelector('.live-header .label');
+  var anyStale=runIds.some(function(rid){return runs[rid].stale});
+  if(!gRunning&&gDone){
+    lbl.textContent=anyStale?'COMPLETED (connection lost)':gFailed>0?'COMPLETED WITH FAILURES':'ALL TESTS PASSED';
+    lbl.style.color=anyStale?'var(--yellow)':gFailed>0?'var(--red)':'var(--green)';
+    var dot=lbl.querySelector('.dot');if(dot)dot.remove();
+    $('#liveProgressFill').style.background=anyStale?'var(--yellow)':gFailed>0?'var(--red)':'var(--green)';
+  } else {
+    if(!lbl.querySelector('.dot')){lbl.textContent='';var d=el('span',{className:'dot'});lbl.appendChild(d);lbl.appendChild(document.createTextNode(' RUNNING'))}
+    lbl.style.color='var(--purple)';$('#liveProgressFill').style.background='var(--purple)';
+  }
+
+  grid.textContent='';
+  runIds.forEach(function(rid){
+    var L=runs[rid];
+    var projLabel=L.project||(L.cwd?L.cwd.split('/').pop():'Run');
+    var runStatus=L.done?(L.failed>0?'fail':'pass'):'running';
+    var dismissBtn=null;
+    if(L.done||!L.on){dismissBtn=el('button',{className:'lr-dismiss',onclick:function(e){e.stopPropagation();dismissLiveRun(rid)}},'\u2715')}
+    grid.appendChild(el('div',{className:'lr-section-header '+runStatus},[
+      el('span',{className:'lr-project-name'},projLabel),createTriggerBadge(L.triggeredBy),
+      el('span',{className:'lr-section-stats'},[el('span',{},L.completed+'/'+L.total),L.failed>0?el('span',{style:'color:var(--red);margin-left:6px'},L.failed+' failed'):null,L.on?el('span',{className:'spinner-small',style:'margin-left:6px'}):null]),
+      dismissBtn
+    ]));
+
+    var poolDist=buildPoolDistribution(L.tests);
+    if(poolDist)grid.appendChild(poolDist);
+
+    var testGrid=el('div',{className:'lr-test-grid'});
+    Object.keys(L.tests).forEach(function(name){
+      if(name==='__error')return;
+      var t=L.tests[name];var testKey=rid+'::'+name;
+      var iconText=t.status==='passed'?'\u2714':t.status==='failed'?'\u2718':'\u25CF';
+      var iconColor=t.status==='passed'?'color:var(--green)':t.status==='failed'?'color:var(--red)':'color:var(--purple)';
+      var meta='';
+      if(t.status==='running'){meta=t.actionType?('Step '+(t.actions||0)+'/'+(t.totalActions||'?')):'starting...';if(t.retry)meta='Retry '+t.retry}
+      else if(t.status==='passed'){meta=t.duration||'done'}
+      else if(t.status==='failed'){meta=t.error||'failed'}
+
+      var stepsEl=el('div',{className:'lt-actions'});
+      if(t.actionLog&&t.actionLog.length>0){
+        t.actionLog.forEach(function(a){
+          var detail=a.narrative||a.selector||a.value||a.text||'';
+          var durText=a.duration!=null?(a.duration<1000?a.duration+'ms':(a.duration/1000).toFixed(1)+'s'):'';
+          var retryBadge=null;
+          if(a.actionRetries&&a.actionRetries>0){retryBadge=el('span',{className:'badge flaky',style:'font-size:9px;padding:1px 5px;margin-left:4px'},'\u21BB x'+a.actionRetries)}
+          var stepCls='lt-step'+(a.isPoolLog?' pool-log':'');
+          stepsEl.appendChild(el('div',{className:stepCls},[
+            el('span',{className:'step-icon '+(a.isPoolLog?'':a.success?'ok':'fail')},a.isPoolLog?'\uD83D\uDD17':a.success?'\u2714':'\u2718'),
+            el('span',{className:'step-type'},a.isPoolLog?'pool':a.type),
+            el('span',{className:'step-detail'},a.isPoolLog?a.narrative:detail),
+            retryBadge,
+            a.isPoolLog?null:el('span',{className:'step-dur'},durText)
+          ]));
+        });
+        if(t.status==='running'&&t.actions<t.totalActions){stepsEl.appendChild(el('div',{className:'lt-step'},[el('span',{className:'step-icon run spinner-small'}),el('span',{className:'step-type',style:'opacity:.6'},'waiting...')]))}
+      } else if(t.status==='running'){
+        stepsEl.appendChild(el('div',{className:'lt-step'},[el('span',{className:'step-icon run spinner-small'}),el('span',{className:'step-type',style:'opacity:.6'},'connecting...')]));
+      }
+      var isFinished=t.status==='passed'||t.status==='failed';
+      var isCollapsed=isFinished&&S.liveCollapsed.has(testKey);
+      var summaryEl=el('div',{className:'lt-summary'},[el('span',{className:'lt-dur'},t.duration||''),el('span',{className:'lt-expand'},isCollapsed?'\u25BC':'\u25B2')]);
+
+      var ssEl=null;
+      var allSS=(t.screenshots||[]).slice();
+      if(t.errorScreenshot)allSS.push(t.errorScreenshot);
+      if(allSS.length>0){
+        var ssOpen=S.liveSSOpen&&S.liveSSOpen.has(testKey);
+        var toggle=el('div',{className:'lt-screenshots-toggle'+(ssOpen?' open':'')},[el('span',{className:'ss-arrow'},'\u25B6'),el('span',{},'Screenshots ('+allSS.length+')')]);
+        var ssGridEl=el('div',{className:'lt-screenshots-grid'});
+        allSS.forEach(function(ssPath){
+          var fname=ssPath.split('/').pop();var isErr=t.errorScreenshot&&ssPath===t.errorScreenshot;
+          var thumb=el('div',{className:'lt-ss-thumb'});
+          var img=document.createElement('img');img.src='/api/image?path='+encodeURIComponent(ssPath);img.alt=fname;img.loading='lazy';
+          if(isErr)thumb.style.borderColor='var(--red)';
+          thumb.appendChild(img);
+          thumb.addEventListener('click',function(e){e.stopPropagation();openModal('/api/image?path='+encodeURIComponent(ssPath),fname)});
+          var labelEl=el('div',{className:'lt-ss-label'},[el('span',{style:'overflow:hidden;text-overflow:ellipsis;white-space:nowrap'},fname)]);
+          (function(lbl,sp){ssHash(sp).then(function(h){lbl.appendChild(createHashBadge(h))})})(labelEl,ssPath);
+          ssGridEl.appendChild(el('div',{},[thumb,labelEl]));
+        });
+        toggle.addEventListener('click',function(e){e.stopPropagation();if(S.liveSSOpen.has(testKey))S.liveSSOpen.delete(testKey);else S.liveSSOpen.add(testKey);toggle.classList.toggle('open');ssGridEl.style.display=ssGridEl.style.display==='grid'?'none':'grid'});
+        if(ssOpen)ssGridEl.style.display='grid';
+        ssEl=el('div',{className:'lt-screenshots'},[toggle,ssGridEl]);
+      }
+
+      // Screencast focus indicator
+      var scFocusBadge=null;
+      if(t.status==='running'){
+        var isFocused=S.screencastTest===name;
+        scFocusBadge=el('span',{className:'sc-focus-badge'+(isFocused?' active':''),title:'Watch this test',onclick:function(e){e.stopPropagation();S.screencastTest=name;$('#screencastSelect').value=name;$('#screencastImg').style.display='block';$('#screencastPlaceholder').style.display='none';renderLive()}},'\uD83C\uDFA5');
+      }
+      var serialBadge=t.serial?el('span',{className:'serial-badge'},'Serial'):null;
+      var poolBadge=t.poolUrl?el('span',{className:'pool-badge'},t.poolUrl.replace('ws://','').replace('wss://','')):null;
+      var card=el('div',{className:'live-test '+t.status+(isCollapsed?' collapsed':'')},[
+        el('div',{className:'lt-name'},[
+          t.status==='running'?el('span',{className:'spinner'}):el('span',{className:'lt-icon',style:iconColor},iconText),
+          document.createTextNode(' '+name),scFocusBadge,serialBadge,poolBadge,summaryEl
+        ]),
+        el('div',{className:'lt-meta'},meta),stepsEl
+      ]);
+      if(ssEl)card.appendChild(ssEl);
+      if(t.networkLogs&&t.networkLogs.length&&!isCollapsed){
+        var liveErrCount=t.networkLogs.filter(function(n){return n.status>=400}).length;
+        var liveNetHead=el('div',{className:'rd-net-head'},[el('span',{className:'net-arrow'},'\u25B6'),el('span',{className:'net-title'},'Network Requests'),el('div',{className:'net-stats'},[el('span',{className:'net-stat'},[document.createTextNode('Total: '),el('strong',null,String(t.networkLogs.length))]),liveErrCount?el('span',{className:'net-stat has-err'},[document.createTextNode('Errors: '),el('strong',null,String(liveErrCount))]):null])]);
+        var liveNetCols=el('div',{className:'rd-net-cols'},[el('span',{className:'col-e'},''),el('span',{className:'col-m'},'Method'),el('span',{className:'col-s'},'Status'),el('span',{className:'col-u'},'URL'),el('span',{className:'col-d'},'Time')]);
+        var liveNetBody=el('div',{className:'rd-net-body'},[liveNetCols]);
+        t.networkLogs.forEach(function(n){var built=buildNetRow(n);liveNetBody.appendChild(built.row);if(built.detail)liveNetBody.appendChild(built.detail)});
+        liveNetHead.addEventListener('click',function(e){e.stopPropagation();liveNetHead.classList.toggle('open')});
+        card.appendChild(el('div',{className:'rd-net-panel',style:'margin-top:6px'},[liveNetHead,liveNetBody]));
+      }
+      if(isFinished){card.addEventListener('click',function(e){if(window.getSelection().toString())return;if(S.liveCollapsed.has(testKey))S.liveCollapsed.delete(testKey);else S.liveCollapsed.add(testKey);renderLive()})}
+      testGrid.appendChild(card);
+      if(!isCollapsed)stepsEl.scrollTop=stepsEl.scrollHeight;
+    });
+    grid.appendChild(testGrid);
+  });
+  updateScreencastSelect();
+}