misc: return specific html element type for dom.find

lighthouse-core/report/html/renderer/category-renderer.js

@@ -100,7 +100,7 @@ class CategoryRenderer {
       });
     }
 
-    const header = /** @type {HTMLDetailsElement} */ (this.dom.find('details', auditEl));
+    const header = this.dom.find('details', auditEl);
     if (audit.result.details) {
       const elem = this.detailsRenderer.render(audit.result.details);
       if (elem) {
@@ -326,7 +326,7 @@ class CategoryRenderer {
    */
   renderScoreGauge(category, groupDefinitions) { // eslint-disable-line no-unused-vars
     const tmpl = this.dom.cloneTemplate('#tmpl-lh-gauge', this.templateContext);
-    const wrapper = /** @type {HTMLAnchorElement} */ (this.dom.find('.lh-gauge__wrapper', tmpl));
+    const wrapper = this.dom.find('.lh-gauge__wrapper', tmpl, 'a');
     wrapper.href = `#${category.id}`;
 
     if (Util.isPluginCategory(category.id)) {

lighthouse-core/report/html/renderer/dom.js

@@ -213,27 +213,42 @@ class DOM {
   /**
    * Guaranteed context.querySelector. Always returns an element or throws if
    * nothing matches query.
+   * @template {string} T
    * @param {string} query
    * @param {ParentNode} context
-   * @return {!HTMLElement}
+   * @param {T=} tagName Functionally optional, but providing it avoids needing a typecast
+   * @return {HTMLElementByTagName[T]}
    */
-  find(query, context) {
+  find(query, context, tagName) {
     /** @type {?HTMLElement} */
     const result = context.querySelector(query);
     if (result === null) {
       throw new Error(`query ${query} not found`);
     }
+    if (tagName && result.tagName !== tagName.toUpperCase()) {
+      throw new Error(`expected ${tagName.toUpperCase()}, but got ${result.tagName}`);
+    }
     return result;
   }
 
   /**
    * Helper for context.querySelectorAll. Returns an Array instead of a NodeList.
+   * @template {string} T
    * @param {string} query
    * @param {ParentNode} context
-   * @return {!Array<HTMLElement>}
+   * @param {T=} tagName Functionally optional, but providing it avoids needing a typecast
+   * @return {Array<HTMLElementByTagName[T]>}
    */
-  findAll(query, context) {
-    return Array.from(context.querySelectorAll(query));
+  findAll(query, context, tagName) {
+    const result = /** @type {HTMLElement[]} */ (Array.from(context.querySelectorAll(query)));
+    if (tagName) {
+      for (const el of result) {
+        if (el.tagName !== tagName.toUpperCase()) {
+          throw new Error(`expected ${tagName.toUpperCase()}, but got ${el.tagName}`);
+        }
+      }
+    }
+    return result;
   }
 }
 

lighthouse-core/report/html/renderer/pwa-category-renderer.js

@@ -58,8 +58,7 @@ class PwaCategoryRenderer extends CategoryRenderer {
     }
 
     const tmpl = this.dom.cloneTemplate('#tmpl-lh-gauge--pwa', this.templateContext);
-    const wrapper = /** @type {HTMLAnchorElement} */ (this.dom.find('.lh-gauge--pwa__wrapper',
-      tmpl));
+    const wrapper = this.dom.find('.lh-gauge--pwa__wrapper', tmpl, 'a');
     wrapper.href = `#${category.id}`;
 
     // Correct IDs in case multiple instances end up in the page.

lighthouse-core/report/html/renderer/report-renderer.js

@@ -70,7 +70,7 @@ class ReportRenderer {
    */
   _renderReportTopbar(report) {
     const el = this._dom.cloneTemplate('#tmpl-lh-topbar', this._templateContext);
-    const metadataUrl = /** @type {HTMLAnchorElement} */ (this._dom.find('.lh-topbar__url', el));
+    const metadataUrl = this._dom.find('.lh-topbar__url', el, 'a');
     metadataUrl.href = metadataUrl.textContent = report.finalUrl;
     metadataUrl.title = report.finalUrl;
     return el;

lighthouse-core/report/html/renderer/report-ui-features.js

@@ -138,8 +138,7 @@ class ReportUIFeatures {
     const hasMetricError = report.categories.performance && report.categories.performance.auditRefs
       .some(audit => Boolean(audit.group === 'metrics' && report.audits[audit.id].errorMessage));
     if (hasMetricError) {
-      const toggleInputEl = /** @type {HTMLInputElement} */ (
-        this._dom.find('.lh-metrics-toggle__input', this._document));
+      const toggleInputEl = this._dom.find('.lh-metrics-toggle__input', this._document, 'input');
       toggleInputEl.checked = true;
     }
 
@@ -246,8 +245,7 @@ class ReportUIFeatures {
 
       // create input box
       const filterTemplate = this._dom.cloneTemplate('#tmpl-lh-3p-filter', this._templateContext);
-      const filterInput =
-        /** @type {HTMLInputElement} */ (this._dom.find('input', filterTemplate));
+      const filterInput = this._dom.find('input', filterTemplate, 'input');
       const id = `lh-3p-filter-label--${index}`;
 
       filterInput.id = id;
@@ -527,8 +525,7 @@ class ReportUIFeatures {
    * open a `<details>` element.
    */
   expandAllDetails() {
-    const details = /** @type {Array<HTMLDetailsElement>} */ (this._dom.findAll(
-        '.lh-categories details', this._document));
+    const details = this._dom.findAll('.lh-categories details', this._document, 'details');
     details.map(detail => detail.open = true);
   }
 
@@ -537,8 +534,7 @@ class ReportUIFeatures {
    * open a `<details>` element.
    */
   collapseAllDetails() {
-    const details = /** @type {Array<HTMLDetailsElement>} */ (this._dom.findAll(
-        '.lh-categories details', this._document));
+    const details = this._dom.findAll('.lh-categories details', this._document, 'details');
     details.map(detail => detail.open = false);
   }