ImageUsage gatherer: Cannot read property 'tagName' of null

[patrickhulce]

Encountered in #2293 on https://www.victoriassecret.com/

Audit error: Required ImageUsage gatherer encountered an error: Cannot read property 'tagName' of null

comes from line 48 where we grab the parentElement of the image

should be !!element.parentElement && element.parentElement.tagName === 'PICTURE'

lighthouse/lighthouse-core/gather/gatherers/image-usage.js

Lines 34 to 52 in cfc2afe

	const htmlImages = allImageElements.map(element => {
	const computedStyle = window.getComputedStyle(element);
	return {
	// currentSrc used over src to get the url as determined by the browser
	// after taking into account srcset/media/sizes/etc.
	src: element.currentSrc,
	width: element.width,
	height: element.height,
	clientWidth: element.clientWidth,
	clientHeight: element.clientHeight,
	clientRect: getClientRect(element),
	naturalWidth: element.naturalWidth,
	naturalHeight: element.naturalHeight,
	isCss: false,
	isPicture: element.parentElement.tagName === 'PICTURE',
	usesObjectFit: computedStyle.getPropertyValue('object-fit') === 'cover'
	|| computedStyle.getPropertyValue('object-fit') === 'contain',
	};
	});

[AkshayIyer12]

@patrickhulce I want to work on the issue.

[patrickhulce]

great thanks for volunteering @AkshayIyer12! Let us know if you run into any issues :)

[AkshayIyer12]

@patrickhulce I have done the change locally on my system
!!element.parentElement && element.parentElement.tagName === 'PICTURE'
But I'm not sure how to proceed further.
And I'm also confused with the conventional commit format.
Should my commit be core: Check if element.parentElement is false ?
And if I'm not wrong this is short-circuiting concept with logical operators right? I had recently read about it in Eloquent JS. Thanks 👍

[patrickhulce]

correct @AkshayIyer12 thanks for fixing!

next steps for you are to...

1. commit your code with appropriate message, core(image-usage): add null check for parentElement is fine
2. push your code to your fork on github, assuming you cloned from your fork the command would be something like git push -u origin name_of_your_branch, GitHub has some intro git tutorials if you're unsure what the branch, fork, and push terms are
3. open a pull request on our repo pointing to the branch on your fork
4. wait for us to review and address any comments that come up
5. dance and celebrate your first 💡 🏠 contribution! 🎉 😄

[patrickhulce]

fixed in #3779

[atifwaqar]

I am getting the following error on Auditing my page :

To me it looks like similar or same issue. And I ran the Audit from Chrome Dev tools.

But when I install Chrome Extension Lighthouse, I do not get this error. But I see Accessibility 0, where as I had 100 when I Audited my page using Chrome DebTools. Thats why I'm not relying on Chrome Extension.

[patrickhulce]

@atifwaqar can you report the accessibility bug with a reproducible URL as a separate GitHub issue?

DevTools should be updated to current version of Lighthouse in Chrome 65, hits stable ~early March

[atifwaqar]

@patrickhulce Sure, I'll prepare the reproducible URL and create a separate GH issue this weekend. As of now, I have only a Production server where I can reproduce this issue, but I cant share that link on GH, so i'll create a new test app, where I reproduce the issue.