Components and Templates are the building blocks of any website to have a good user experience. While Components are the structural elements for the page content, templates are the ones used to create pages. When a new website is built or an existing one is revamped to new CMS, it’s important to design reusable components and templates that makes page creation simple but powerful. Also, it is very essential to test all the components and templates at the earliest and identify all potential defects prior to content authoring/migration. A fool proof testing of Components and templates will not only aid the content authors to author pages effectively but also helps in proper page rendering of websites on different screen sizes.
Let’s delve a little deeper into component/ template testing on one of a prominent CMS platform. Adobe Experience Manager is a web-based content management system used for building, managing and deploying commercial websites and related services. It combines several infrastructure-level and application-level functions into a single integrated package. It’s a delight for the content creators and authors due to its interface and multiple easy to use functionalities.
The number of AEM instances can vary from environment to environment, but a full AEM setup is comprised of 1 Author instance, 1 Publish instance, 1 Dispatcher
AEM Author instances are generally hosted on a remote server and run on port 4502. The remote server on which the instance lives is set up behind an internal firewall and usually requires VPN access. Author instances are where users will create content and pass the content to the publishers via activation. The author instance is also the environment where users will create reports on activity on the author instance, upload DAM assets, configure components, and perform any other actions that the end user of the website should not see.
The publish instance of AEM is where the published content resides. It is where the dispatchers pull content from to display to the user. The publish instance receives content from the author instance when an author has activated some content. Publish instances are similar to author instances other than the actual authoring capability.
The dispatcher is an Apache module installed on a server that enables caching of certain pages and assets. Caching pages speeds up the delivery of the content to the end user, and with the dispatcher configuration it’s possible to disallow caching on certain pages/paths if there is some security reason or if the pages house personalized content. The dispatcher also acts as a load balancer to the various publishers associated with the AEM infrastructure.
Components & Templates in AEM
In AEM, authors create, modify and delete content on an authoring environment. Basic authoring activities in AEM such as creating templates, Components, pages, adding text, images, and basic layouts.
Components are modular units that realize specific functionality to present the content on a website. They are re-usable.
There are two sets of Adobe-provided AEM components available:
Core Components have been introduced with AEM 6.3 and offer flexible and feature-rich authoring functionality.
Examples of core components: Form container, content fragment.
Foundation Components have been available with AEM for many versions and are available out-of-the-box in a standard AEM installation. Although still supported they are no longer enhanced and are based on legacy technologies.
Examples of foundation components: Image, Carousel, List, columns etc.
Templates define the frame of a page. It is basically a blueprint for creating a page and describes what are the components that can be used within the page. It has the same hierarchy as a page but with no content
- Editable template
- Static template
Editable templates have been introduced to allow template authors to create and edit templates.
An editable template has the elements to configure and edit:
- Structure: On the Structure, you can define the components and contents for your templates. The components defined in the template structure cannot be moved nor deleted from a resulting page.
- Initial Content: On the Initial Content, you can define content that will appear when a page is first created based on the template. Initial content can then be edited by page authors.
- Layout: You can define the template layout for a range of devices. Responsive layout for templates operates in the same way as it does for page authoring.
Examples of default templates available are Home page, content page
Static Templates have been available for several versions of AEM. They are provided by developers, so they cannot be created or edited by authors.
Due deliberation/Major Areas of testing for components and templates
QA is a very important phase in the development lifecycle. Proper testing of Components and templates will save time in remodeling a component that poses a challenge during the content authoring and publishing pates. QA associates need to fit in the shoes of a content author and ensure that they find anomalies earlier in the development process. Test strategy during authoring tests need to ensure that all major in-built functionalities available as component properties are tested effectively. Requirements defined from marketing folks in terms of the inclusion of the important tags for page accessibility, searchability can be tested at this phase as well by including the relevant tags while authoring the pages. Following are some of the important areas of testing during the basic authoring/publishing tests.
Important areas of Testing:
- Properties of Components and Templates and authoring referring wireframes:
- Verify component naming conventions
- Verify field names in all component dialogs
- Verify the tags on webpages by configuring the individual components
- Verify the consistency in for components and field names
- Verify Template Design – Create a page using each template (required for the project)
- Verify predefined components of a template
- Verify by adding components to different templates
- Verify by authoring content into all the fields for each component
- Content Policies:
Content policies are configurations that govern the behavior of components across an entire section of an AEM website. In AEM versions prior to 6.3, they were sometimes called designs.Just like the real rules of the road, content policies govern what authors may do on the website. AEM content policies get enforced by developers with APIs.
Testing Content Policies:
Content policies cannot be changed by ordinary users.
- Content policies are set by the owners of the site
- There can be many combinations of components and templates in a given AEM site
- AEM makes it easy by allowing you to name, describe and re-use content policies.
- The policy settings (or configuration properties) can be defined by the developer of the component and retrieved just as easily as the edit properties.
- Responsive Testing
Developers develop Adobe Experience Manager (AEM) applications that generate HTML5 pages that adapt to multiple window sizes and orientations. It’s very important for the tester to make sure to perform testing on all the supported devices shared by client.
Approach to test on different Devices (Resolutions):
- Add all the components to the page as per design
- Author the content on all components
- Publish the page
- Verify UI, Functionality on different browsers, Devices as specified by customer.
- Text, controls, and images must be aligned and properly placed across the site.
- Color, shading, and gradient must be consistent.
- The clickable area must be well-adjusted and of suitable sizing.
- Text and data entry must be displayed correctly.
- Text, images, controls, and frames do not exceed the edges of the screen, whether desktop or mobile.
Tester’s role in providing a good experience for content authors
Authoring is the process of content creation in Adobe Experience Manager (AEM). It allows content authors to make changes to content without a code release. A good AEM application should consist of components and pages that are easy to author for non-technical content authors. Following measures can help in this regard
- Ease of authoring: Authoring guides can go a long way in ensuring good authoring experience. The guidelines laid out can help content authors and testers about the technical details of AEM components and their usage. Testers can make attempts using this guide and call out the issues before the system is put in to use for a large business audience.
- Help shortcuts while authoring: Help icons available on components when clicked will navigate to Adobe forums that give more information about the component, which is useful information for both testers and business user. Testers needs to ensure its providing meaningful information else they can provide additional notes for the business users.