This article is a guest post written by Dan Martin. Dan has been building teams and coaching others to foster innovation and solve real-time problems. Dan also enjoys photography and traveling.

Modern era web development is fast evolving. Software development companies hire highly-skilled web development engineers, UX designers, test automation developers to deliver user-friendly websites with engaging content.

In the pretext of inserting content into websites, web developers rely on both internal and external entities. Several web development tools enable this embedding methodology. Advanced automation testing tools can also identify and interact with these elements efficiently.

This article explains how different types of external elements are embedded into web pages using different methods. It also mentions the test automation perspective of testing tricky entities such as iFrames.

Embed External Multimedia – Audio

Web development engineers use <audio> elements to embed audio content into web pages. It is associated with the <source> where the path to the audio is made. For example:

The result is a web page with the audio controls embedded in it, audio formats such as the following: wav, mp3 can be used in this case.

Embed External Multimedia – Video

Web developers use <video>  to embed video content into web pages. It is associated with the <source> where the path to the video is made. For example:

With this, apart from the video playing, the video controls also come in as a part of the package just as in the audio embedding display. 

Embedding External Web Pages - <iframe>

Web developers can embed web pages with external web documents using the <iframe>. Iframes or inline frames are nothing but an HTML doc embedded within another HTML doc. You could also embed YouTube videos, Google Maps, etc., using iFrames. Here are two such examples:

‍

Example 1 - Embedding a YouTube video

‍Here is an example where we embed the YouTube video into the HTML page. Try out the following steps:

1. Open any YouTube video. Click the ‘Share’ Button
2.  Upon clicking the ‘share’ button, a pop-up appears, which displays an option captioned as ‘Embed’. Click it.
3. Upon clicking the Embed option, the iframe code appears. Copy and paste this into the HTML Code.
   

For example:

From this point forward, users are able to play the YouTube video from the HTML page.

‍

Example 2 - Embedding an area from Google Map‍

Here is another example: let us try embedding maps into the web page. To obtain the iframe code, follow these steps:

1. Open Google Maps
2. Click the Menu option – Click the embed map option. The code appears as the following:

Copy and paste it to the HTML page that is being developed, and view the output. The map will be displayed along with the controls on the web page.

Test Automation on Web Pages Containing <iframe>

From the perspective of testing, it is tricky to test web pages that contain iFrames using test automation tools. If test automation can handle tricky elements such as iFrames, it moves complexity away from the test automation and ensures an efficient and robust test script development.

For example, tools like TestProject interact with these entities using their SmartRecorder. Similarly, using the Leapwork tool, they can interact with web blocks and iFrames.

Embedding PDFs - <object>

Let us try embedding the PDFs into the web page using the object element. Here is an example:

Upon doing so, the PDF file can be viewed from the website. Of course, you could set the attributes such as width, height, etc., to customize it just as in the other cases.

Embedding External Javascript Code

External Javascript files can also be called from the HTML file as follows. Here is an example, where an external function from an external Javascript file is called:

The function myFunction() which is present in myJSScript.js. On clicking the button, the external function gets called to perform the code written in that script.

Embedding Images - < img >

How about images? Well, just mention the path to the image file in the src, and the image embedding process completes. For example:

Embedding External HTML Page Contents - < portal >

Portals are similar to iFrames. However, unlike how the iframe works, the portal’s content cannot be interacted with but can be navigated on. Usually, it behaves as a preview of another web page within the current page. It can be navigated in Google chrome using:

chrome://flags/#enable-portals

Once embedded,  the user can even navigate to the external page with which it was associated. The concepts around this concept are elaborate and are worth exploring. 

A Note on Accessibility

While embedding elements on the web page, we should also remember that when it is accessed by specific users using assistive technology, they should not encounter any issues with accessibility.  

For example, for users with visual impairment using the Screen Reader technology to read the web page, the ‘title’ attribute of the embedded element holds vital significance. When a screen reader deciphers what is present on the page, it reads out the title and helps visually impaired users understand what is displayed on that web page. Because of this, the web developer has a strong responsibility to ensure concise, relevant text is mentioned in the title attribute. Otherwise, a visually impaired user will not have this important reference point. 

Wrap Up

Web developers rely on embedding external web elements in the pretext of re-usability, making pages interactive, and even imparting a great user experience. They also ensure that efficient design, usability, accessibility, etc., are not sidelined.

Responsible developers always keep the users’ perspective as the guiding force in web development. They also work towards efficient development methodologies to increase web traffic to the site and provide high-quality content to foster long-term customer engagement. By pursuing the whole process in a 360-degree outlook, a QA team can ensure that a high-quality web page product is released, benefiting both the customer and the business.