Trouble With Portfolio Page Tests despite required code - 8/10

Hello,

I am finishing up my Tribute page on Elon Musk:

When I run the tests, I fail User Stories 1 & 5.

image

For User story #5, I have the test 3 .image-div overlay containing textual information about my first image. (HTML line 30 - 36). This contains tests 4 and 5, with only 5 not passing. The only possibility I can see is that img-caption is hidden until hovered, which may throw off the test.

  1. Within the “img-div” element, I should see either a or
    element with a corresponding id=“img-caption” that contains textual content describing the image shown in “img-div”.
<div class="project-card" id="img-div"> <!-- Test 3 -->
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/PBHS-facade.jpg" alt="Pretoria Boys High School" id="image"/> <!-- Test 4 -->
      <div class="project-desc" id="img-caption"> <!-- Test 5 -> Not Passing -->
        <p>Pretoria Boys High School</p>
        <a href="https://en.wikipedia.org/wiki/Elon_Musk"target="_blank"class="view-project-button"> Wikipedia Page </a>
      </div>
    </div>

I am also failing test 1:

  1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

My images are responsive and styled on CSS 146, 155, 160 (Tried just for tests but failed), and 260 for media. Not sure why these images are failing the test.

@michaelnicol, when a test fails lick the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The first failing message says

Within the "img-div" element, I should see either a <figcaption> or <div> element with a corresponding id="img-caption" that contains textual content describing the image shown in "img-div".
Element does not have any content : expected 0 to be above 0
AssertionError: Element does not have any content : expected 0 to be above 0

Do you understand what the test is looking for and why it’s failing?

Try reading the next failing message thoroughly and see if you can understand what the full text of the failing message is telling you.
HINT: When you correct this and run the test again it will fail but the message will be different. Once again, be sure and read the full text of the message. Not just the first line.

1 Like

You do not need the visibility to be hidden for the overlay. Just start it out at 0 opacity. You should also set the parent container to position: relative so the overlay is absolutely positioned relative to the parent container.

As for the layout test, it tells you what the missing properties on the image selector are.

1 Like

Thank you both for your help. I made the mistake of skim reading and skipping over important details when looking through the errors. I also should’ve designed the webpage with the users stories in mind first instead of worrying about them later.

I will learn from this mistake and I am happy with the now 10/10 tests passed!