WordPress plugins are designed to enhance the functionality and performance of your WordPress website. We can run an automation test to see plug-in installation, activation, and configuration of the plugin's settings to customize the appearance and behavior of the plug-in to suit your website's design and preferences.
Plugin info: https://wordpress.org/plugins/wp-dark-mode/
following scenarios, which will be replicated
- Log in to your WordPress site.
- Check whether the “WP Dark Mode” Plugin is Active or not.
- If Active, navigate to the WP Dark Mode & continue. Otherwise, Install the Plugin and Activate it.
- Enable Backend Darkmode from Settings -> General Settings.
- Validate whether the dark mode is working or not on the Admin Dashboard.
- Navigate to the WP Dark Mode.
- From Settings -> Switch Settings - Change the “Floating Switch Style” from the default selections (Select any one from the available options, except the default selected one).
- From Settings -> Switch Settings - Select Custom Switch size & Scale it to 220.
- From Settings -> Switch Settings - Change the Floating Switch Position (Left Bottom).
- Disable Keyboard Shortcut from the Accessibility Settings.
- From Settings -> Animation - Enable “Darkmode Toggle Animation” & change the “Animation Effect” from the default selections (Select any one from the available options, except the default selected one).
- Validate whether the Darkmode is working or not from the Frontend.
Install Xampp: https://www.apachefriends.org/download.html
Open Xampp to start Apache and MySQL
Download Wordpress file: https://wordpress.org/download/
Create the database(watch to the .env.example file):
My file directory
[DB_HOST = localhost
DB_PORT = 3306
DB_DATABASE = assignmentwp
DB_USERNAME =root
DB_PASSWORD= ]
The following instructions will help you navigate those testing pages. We will create some packages. At the package level, there is a list of classes where you can create methods, use methods for particular pages, and run and test the testing pages separately
-
Set Environment
i) pom.xml [dependencies set]
ii) BrowserSetup[create separate package ] -
Page Object Model: create methods, using methods for separate page and create test cases of those pages
i) Methods[package name:TestingMethodsAndPages]
ii) Page objects[package name:TestingMethodsAndPages]
iii) TestCases [package name: Testpages ] -
Create Allure report
i) pom.xml [dependencies set for allure report]
ii) Testng.xml [to run all test file togather]
Create a Maven Project Set pom.xml file pom.xml file Code: Set Under Dependencies
<dependencies>
<!-- https://mvnrepository.com/artifact/org.testng/testng -->
<dependency>
<groupId>org.testng</groupId>
<artifactId>testng</artifactId>
<version>7.6.1</version>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.6.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager -->
<dependency>
<groupId>io.github.bonigarcia</groupId>
<artifactId>webdrivermanager</artifactId>
<version>5.3.0</version>
</dependency>
</dependencies>
</project>
Create Some class under Packages One of the package will hold BorwserSetup in which we run the automation Code
Inside BorwserSetup Class:
It will hold three Driver(Chrome, Firefox, and Edge), use according to your preferences I prefer to use the Edge Driver (Edge Browser) to run my code.
package Wppool.AssignmentWP;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.edge.EdgeDriver;
import org.openqa.selenium.edge.EdgeOptions;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.firefox.FirefoxOptions;
import org.testng.annotations.AfterSuite;
import org.testng.annotations.BeforeSuite;
import io.github.bonigarcia.wdm.WebDriverManager;
public class BrowserSetup {
private static String BrowserName = System.getProperty("browser", "Edge");
private static final ThreadLocal<WebDriver> DRIVER_LOCAL = new ThreadLocal<>();
public static WebDriver getDriver() {
return DRIVER_LOCAL.get();
}
public static void setDriver(WebDriver driver) {
BrowserSetup.DRIVER_LOCAL.set(driver);
}
public static WebDriver getBrowser(String BrowserName) {
switch (BrowserName.toLowerCase()) {
case "chrome":
ChromeOptions option1 = new ChromeOptions();
option1.addArguments("--remote-allow-origins=*");
WebDriverManager.chromedriver().setup();
return new ChromeDriver(option1);
case "edge":
EdgeOptions option2 = new EdgeOptions();
option2.addArguments("--remote-allow-origins=*");
WebDriverManager.edgedriver().setup();
return new EdgeDriver(option2);
case "firefox":
FirefoxOptions option3 = new FirefoxOptions();
option3.addArguments("--remote-allow-origins=*");
WebDriverManager.firefoxdriver().setup();
return new FirefoxDriver(option3);
default:
throw new RuntimeException("Browser Not found");
}
}
@BeforeSuite
public static synchronized void setBrowser() {
WebDriver webDriver = getBrowser(BrowserName);
webDriver.manage().window().maximize();
setDriver(webDriver);
}
@AfterSuite
public static synchronized void quitBrowser() {
getDriver().quit();
}
}
Create a package which include classes like method and other testing Page
method class includes methods of getElement, click, hover, field fillup, visible wait element, click wait element and take screenshot for allure report. This class appears to contain various methods for interacting with web elements using Selenium WebDriver. Here's a brief overview of the methods:
- getElement(By locator): Returns a WebElement located by the given By locator.
- clickElement(By locator): Clicks on the WebElement identified by the provided locator.
- FieldValue(By locator, String text): Enters the specified text into the input field identified by the given locator.
- WaitElementVisible(By locator): Waits for the visibility of the element located by the provided locator with a timeout of 20 seconds.
- Hover(By locator): Performs a hover action on the element located by the given locator using the Actions class.
- DropDownSelectElement(By locator): Selects the first option in the dropdown list identified by the given locator.
- takeScreenshot(String name): Captures a screenshot and attaches it to the Allure report with the specified name.
package TestingMethodsAndPages;
import static Wppool.AssignmentWP.BrowserSetup.getDriver;
import java.io.ByteArrayInputStream;
import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.Select;
import org.openqa.selenium.support.ui.WebDriverWait;
import io.qameta.allure.Allure;
public class Methods {
public WebElement getElement(By locator) {
//import static Wppool.AssignmentWP.BrowserSetup.getDriver;
return getDriver().findElement(locator//driver = getDriver(
}
public void clickElement(By locator) {
getElement(locator).click(
}
public void FieldValue(By locator, String text) {
getElement(locator).sendKeys(text
}
public void WaitElementVisible(By locator) {
WebDriverWait wait = new WebDriverWait(getDriver(), Duration.ofSeconds(20)
wait.until(ExpectedConditions.visibilityOfElementLocated(locator)
}
public void Hover(By locator) {
Actions action = new Actions(getDriver()
//action.moveToElement(driver.findElement(locator)).perform(
action.moveToElement(getElement(locator)).perform(;
}
public void DropDownSelectElement(By locator) {
Select select = new Select(getElement(locator)
select.selectByIndex(0
}
//for allure report
public void takeScreenshot(String name) {
Allure.addAttachment(name, new ByteArrayInputStream(((TakesScreenshot)getDriver()).getScreenshotAs(OutputType.BYTES))
}
}
Login to Dashbord
- Log in to your WordPress site.
- Check whether the “WP Dark Mode” Plugin is Active or not.
Login to Dashbord page objects and there intented xpaths
Overview of the sleecing path of the login page image:
This class represent a set of methods related to the WordPress login portal. Here's a brief overview of the class:
Element Locators:
USERNAME: Locator for the username input field.
PASSWORD: Locator for the password input field.
LOGINBUTTON: Locator for the login button.
DASHBORD: Locator for the Dashboard heading.
SAKIF: Locator for the element containing the display name "Sakif."
LOGOUT: Locator for the logout link.
Method: WordPressLogin()
Attempts to log in to WordPress with a predefined username and password.
Calls methods from the Methods class, such as FieldValue, clickElement, and WaitElementVisible.
Video Guidence: https://drive.google.com/file/d/1Mm98bgFtf1igQCeTzpkEtHvdBjwfYPbk/view?usp=drive_link
Login to Dashbord objects and methods
package TestingMethodsAndPages;
import org.openqa.selenium.By;
public class WordPressLoginPortal extends Methods{
public By USERNAME = "//input[@id='user_login']"
public By PASSWORD = "//input[@id='user_pass']"
public By LOGINBUTTON = "//input[@id='wp-submit']"
public By DASHBORD = "//h1[normalize-space()='Dashboard']"
public By SAKIF = "(//span[@class='display-name'][normalize-space()='Sakif'])[1]"
public By LOGOUT ="//a[@class='ab-item'][normalize-space()='Log Out']"
public void WordPressLogin() throws InterruptedException{
FieldValue(USERNAME, "Sakif"
Thread.sleep(2000
FieldValue(PASSWORD, "sakif@006"
Thread.sleep(2000
clickElement(LOGINBUTTON
WaitElementVisible(DASHBORD
Thread.sleep(2000
}
}
Login to Dashbord testSuite
package TestPages;
import org.testng.annotations.Test;
import TestingMethodsAndPages.WordPressLoginPortal;
import Wppool.AssignmentWP.BrowserSetup;
public class LoginToDashbord extends BrowserSetup {
WordPressLoginPortal login = new WordPressLoginPortal(
@Test(description = "Secenario 1 = Before WP DarkMode plugin Dashbord looks like")
public void WPlogin() throws InterruptedException{
getDriver().get("http://localhost/wordpress-6.3.1/wordpress/wp-admin"
Thread.sleep(2000
login.WordPressLogin(
login.takeScreenshot("Dashbord Before plugin"
login.Hover(login.SAKIF
login.clickElement(login.LOGOUT
}
}
- If Active, navigate to the WP Dark Mode & continue. Otherwise, Install the Plugin and Activate it.
- Enable Backend Darkmode from Settings -> General Settings.
- Validate whether the Darkmode is working or not on the Admin Dashboard.
To replicate those scenario:
Fields xpath: Overview of the sleecing path of the login page image:
After login to dashbord go to plugin option in the menu bar and hover to wait add plugins option is visible, then click it and wait for track the Add plugins page visible then fill up search field to search WP Dark Mode when the desire plug in option visible then install it and wait for activation button appears and the activate it.
Videp guidence:
This class appears to represent a set of methods related to setting up Dark Mode settings in a WordPress environment. Here's a brief overview of the class:
- Element Locators:
DARKMODESETTINGSMENU: Locator for the WP Dark Mode settings menu.
WaitDMsettingsVisible: Locator for the "Settings" link to wait for visibility.
WaitSettingPage: Locator for the heading on the WP Dark Mode Settings page.
EnableBackendDarkMode: Locator for enabling backend dark mode.
DASHBOARD: Locator for the Dashboard link.
WaitDashbord: Locator for waiting for the Dashboard heading to be visible.
VALIDATEMODEBUTTON: Locator for a button to validate the dark mode.
Method: setUpSetting() - Performs a series of actions to set up Dark Mode settings:
Hovers over the Dark Mode settings menu.
Waits for the "Settings" link to be visible.
Clicks on the "Settings" link.
Waits for the WP Dark Mode Settings page to be visible.
Clicks on the button to enable backend dark mode.
Clicks on the Dashboard link.
Waits for the Dashboard heading to be visible.
Clicks on the button to validate the dark mode.
Takes screenshots at two different points in the process.
Plugin install to activation
package TestingMethodsAndPages;
import org.openqa.selenium.By;
//
public class SetupSettings extends Methods {
public By DARKMODESETTINGSMENU = "//div[normalize-space()='WP Dark Mode']"
public By WaitDMsettingsVisible = "//a[contains(text(),'Settings')]"
public By WaitSettingPage ="//h2[normalize-space()='WP Dark Mode Settings']"
public By EnableBackendDarkMode = "(//div[@class='wp-dark-mode-ignore'])[2]"
public By DASHBORD = "//div[normalize-space()='Dashboard']"
public By WaitDashbord = "//h1[normalize-space()='Dashboard']"
public By VALIDATEMODEBUTTON = "//p[@class='dark wp-dark-mode-ignore']"
public void setUpSetting() throws InterruptedException{
Hover(DARKMODESETTINGSMENU
WaitElementVisible(WaitDMsettingsVisible
Thread.sleep(2000
clickElement(WaitDMsettingsVisible
WaitElementVisible(WaitSettingPage
clickElement(EnableBackendDarkMode
Thread.sleep(2000
clickElement(DASHBORD
WaitElementVisible(WaitDashbord
clickElement(VALIDATEMODEBUTTON
//screenshot
Thread.sleep(2000
clickElement(VALIDATEMODEBUTTON
//screenshot
Thread.sleep(2000
}
}
Plugin install to activation TestSuite[Run as TestNG]
package TestPages;
import org.testng.annotations.Test;
import TestingMethodsAndPages.PluginInstallation;
import TestingMethodsAndPages.WordPressLoginPortal;
import Wppool.AssignmentWP.BrowserSetup;
public class PlugInInstallDirectoryPage extends BrowserSetup {
WordPressLoginPortal login = new WordPressLoginPortal(
PluginInstallation DarkModePlugIn = new PluginInstallation(
@Test(description = "Scenario 2 & 3 = WP Dark Mode Installation")
public void pluginInstall() throws InterruptedException{
getDriver().get("http://localhost/wordpress-6.3.1/wordpress/wp-admin"
Thread.sleep(2000
login.WordPressLogin(
DarkModePlugIn.PluginInstal(
Thread.sleep(3000
login.Hover(login.SAKIF
login.clickElement(login.LOGOUT
}
}
This class appears to represent a set of methods related to setting up Dark Mode settings in a WordPress environment. Here's a brief overview of the class:
- Element Locators:
DARKMODESETTINGSMENU: Locator for the WP Dark Mode settings menu.
WaitDMsettingsVisible: Locator for the "Settings" link to wait for visibility.
WaitSettingPage: Locator for the heading on the WP Dark Mode Settings page.
EnableBackendDarkMode: Locator for enabling backend dark mode.
DASHBOARD: Locator for the Dashboard link.
WaitDashbord: Locator for waiting for the Dashboard heading to be visible.
VALIDATEMODEBUTTON: Locator for a button to validate the dark mode.
Method: setUpSetting() - Performs a series of actions to set up Dark Mode settings:
Hovers over the Dark Mode settings menu.
Waits for the "Settings" link to be visible.
Clicks on the "Settings" link.
Waits for the WP Dark Mode Settings page to be visible.
Clicks on the button to enable backend dark mode.
Clicks on the Dashboard link.
Waits for the Dashboard heading to be visible.
Clicks on the button to validate the dark mode.
Takes screenshots at two different points in the process.
Dark mode plugin settings and options appear image:
Validate whether the Darkmode is working or not on the Admin Dashboard by using dedicated xpaths.
Validate Darkmode methods
package TestingMethodsAndPages;
import org.openqa.selenium.By;
public class SetupSettings extends Methods {
public By DARKMODESETTINGSMENU = "//div[normalize-space()='WP Dark Mode']"
public By WaitDMsettingsVisible = "//a[contains(text(),'Settings')]"
public By WaitSettingPage ="//h2[normalize-space()='WP Dark Mode Settings']"
public By EnableBackendDarkMode = "(//div[@class='wp-dark-mode-ignore'])[2]"
public By DASHBORD = "//div[normalize-space()='Dashboard']"
public By WaitDashbord = "//h1[normalize-space()='Dashboard']"
public By VALIDATEMODEBUTTON = "//p[@class='dark wp-dark-mode-ignore']"
public void setUpSetting() throws InterruptedException{
Hover(DARKMODESETTINGSMENU
WaitElementVisible(WaitDMsettingsVisible
Thread.sleep(2000
clickElement(WaitDMsettingsVisible
WaitElementVisible(WaitSettingPage
clickElement(EnableBackendDarkMode
Thread.sleep(2000
clickElement(DASHBORD
WaitElementVisible(WaitDashbord
clickElement(VALIDATEMODEBUTTON
//screenshot
Thread.sleep(2000
clickElement(VALIDATEMODEBUTTON
//screenshot
Thread.sleep(2000
}
}
Validate Darkmode TestSuite[Run as TestNG]
package TestPages;
import org.testng.annotations.Test;
import TestingMethodsAndPages.SetupSettings;
import TestingMethodsAndPages.WordPressLoginPortal;
import Wppool.AssignmentWP.BrowserSetup;
public class ValidateDarkmodeAdminDashbord extends BrowserSetup{
WordPressLoginPortal login = new WordPressLoginPortal(
SetupSettings validateDMode = new SetupSettings(
@Test(description = "Secenario 4 & 5 = Validate WP DarkMode plugin Dashbord")
public void ValidateDarkModeDashbord() throws InterruptedException{
getDriver().get("http://localhost/wordpress-6.3.1/wordpress/wp-admin"
Thread.sleep(2000
login.WordPressLogin(
validateDMode.setUpSetting(
login.Hover(login.SAKIF
login.clickElement(login.LOGOUT
}
}
- Navigate to the WP Dark Mode.
- From Settings -> Switch Settings - Change the “Floating Switch Style” from the default selections (Select any one from the available options, except the default selected one).
- From Settings -> Switch Settings - Select Custom Switch size & Scale it to 220.
- From Settings -> Switch Settings - Change the Floating Switch Position (Left Bottom).
- Disable Keyboard Shortcut from the Accessibility Settings.
- From Settings -> Animation - Enable “Darkmode Toggle Animation” & change the “Animation Effect” from the default selections (Select any one from the available options, except the default selected one).
This class contain a set of methods related to switching settings in a Dark Mode feature in a WordPress environment. Here's a brief overview of the class:
-
Element Locators:
DMSETTINGSMENU: Locator for the WP Dark Mode settings menu.
WaitVisibleDMsettings: Locator for the "Settings" link to wait for visibility.
SWITCHSETTINGS: Locator for the "Switch Settings" link.
WaitSwitchSettingPage: Locator for waiting for the Switch Settings page to be visible.
FloatingSwitchStyle: Locator for a floating switch style element.
SwitchStyleCustomButton: Locator for the "Custom" button related to switch style.
SELECT: Locator for a dropdown element.
SAVEBUTTON: Locator for the save button.
AccessibleSettings: Locator for the "Accessibility Settings" link.
AccesibleSettingPage: Locator for waiting for the Accessibility Setting page to be visible.
DisableKeybordShortcutButton: Locator for disabling keyboard shortcuts.
AccessiblePageSaveButton: Locator for the save button on the Accessibility Setting page.
AnimationSettings: Locator for the "Animation" link.
AnimationPageVisible: Locator for waiting for the Animation page to be visible.
EnableDarkMode: Locator for enabling dark mode in Animation settings.
WaitAnimationEffect: Locator for waiting for the Animation Effect label to be visible.
AnimationEffectSelect: Locator for the dropdown in Animation settings.
AnimationSaveButton: Locator for the save button on the Animation page.
Method: switchsettingsControl() -
Performs a series of actions to control switch settings:
Hovers over the Dark Mode settings menu.
Waits for the "Settings" link to be visible.
Clicks on the "Settings" link.
Takes a screenshot before switching settings.
Clicks on the "Switch Settings" link.
Clicks on the floating switch style.
Clicks on the "Custom" button.
Selects an option from the dropdown.
Takes a screenshot after switching settings according to the instruction.
Clicks on the save button.
Clicks on the "Accessibility Settings" link.
Waits for the Accessibility Setting page to be visible.
Clicks on the button to disable keyboard shortcuts.
Takes a screenshot of accessible settings according to the instruction.
Clicks on the save button on the Accessibility Setting page.
Clicks on the "Animation" link.
Waits for the Animation page to be visible.
Clicks on the button to enable dark mode in Animation settings.
Waits for the Animation Effect label to be visible.
Selects an option from the Animation Effect dropdown.
Takes a screenshot of animation settings according to the instruction.
Clicks on the save button on the Animation page.
Execution Video:
https://drive.google.com/file/d/1Am36SQ8kiJrjKOQI1z2C_MX7r-IF2NCm/view?usp=drive_link
Settings operation methods following the 6 to 11 scenario:
package TestingMethodsAndPages;
import org.openqa.selenium.By;
public class SwitchSettings6to12 extends Methods{
public By DMSETTINGSMENU = "//div[normalize-space()='WP Dark Mode']"
public By WaitVisibleDMsettings = "//a[contains(text(),'Settings')]"
public By SWITCHSETTINGS ="(//span[contains(text(),'Switch Settings')])[1]"
public By WaitSwitchSettingPage = "(//span[contains(text(),'Switch Settings')])[2]"
public By FloatingSwitchStyle = "(//img[@class='image-choose-img'])[16]"
public By SwitchStyleCustomButton = "//span[normalize-space()='Custom']"
//public By SwitchTo220 ="(//div[@class='ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min'])[4]"
public By SELECT = "(//select[@id='wp_dark_mode_switch[switcher_position]'])[1]"
public By SAVEBUTTON ="(//input[@id='save_settings'])[4]"
public By AccessibleSettings ="(//span[contains(text(),'Accessibility Settings')])[1]"
public By AccesibleSettingPage = "(//h2)[10]"
public By DisableKeybordShortcutButton ="(//div[@class='wp-dark-mode-ignore'])[23]"
public By AccessiblePageSaveButton = "(//input[@id='save_settings'])[8]"
public By AnimationSettings ="(//span[contains(text(),'Animation')])[1]"
public By AnimationPageVisible ="//form[@method='post']//span[contains(text(),'Animation')]"
public By EnableDarkMode ="(//div[@class='wp-dark-mode-ignore'])[30]"
public By WaitAnimationEffect = "//label[normalize-space()='Animation Effect']"
public By AnimationEffectSelect = "//select[contains(@id,'wp_dark_mode_animation')]"
public By AnimationSaveButton ="(//input[@id='save_settings'])[13]"
public void switchsettingsControl() throws InterruptedException{
Hover(DMSETTINGSMENU
WaitElementVisible(WaitVisibleDMsettings
clickElement(WaitVisibleDMsettings
Thread.sleep(2000
WaitElementVisible(SWITCHSETTINGS
takeScreenshot("Before Switch Settings"
clickElement(SWITCHSETTINGS
clickElement(FloatingSwitchStyle
Thread.sleep(1000
clickElement(SwitchStyleCustomButton
Thread.sleep(3000
//clickElement(SwitchTo220
//Thread.sleep(1000
DropDownSelectElement(SELECT
Thread.sleep(1000
takeScreenshot("After Switch Settings according to the instruction"
clickElement(SAVEBUTTON
Thread.sleep(2000
clickElement(AccessibleSettings
WaitElementVisible(AccesibleSettingPage
clickElement(DisableKeybordShortcutButton
Thread.sleep(4000
takeScreenshot("Accessible Setting according to the instruction"
clickElement(AccessiblePageSaveButton
clickElement(AnimationSettings
WaitElementVisible(AnimationPageVisible
Thread.sleep(2000
clickElement(EnableDarkMode
Thread.sleep(4000
WaitElementVisible(WaitAnimationEffect
DropDownSelectElement(AnimationEffectSelect
Thread.sleep(4000
takeScreenshot("Animation setting according to the instruction"
clickElement(AnimationSaveButton
}
}
testSuite run:
package TestPages;
import org.testng.annotations.Test;
import TestingMethodsAndPages.SwitchSettings6to12;
import TestingMethodsAndPages.WordPressLoginPortal;
import Wppool.AssignmentWP.BrowserSetup;
public class Switch_Accessibility_AnimationSettings extends BrowserSetup{
WordPressLoginPortal login = new WordPressLoginPortal(
SwitchSettings6to12 settingsConfig = new SwitchSettings6to12(
@Test(description = "Secenario 6 to 11")
public void AllSettingsSecenario6to12() throws InterruptedException{
getDriver().get("http://localhost/wordpress-6.3.1/wordpress/wp-admin"
Thread.sleep(2000
login.WordPressLogin(
settingsConfig.switchsettingsControl(
login.Hover(login.SAKIF
login.clickElement(login.LOGOUT
}
}
Scenario 12: Validate whether the Darkmode is working or not from the Frontend. Dedicated Xpath:
To validate whether darkmode is working or not, check the visit site by xpath, then when the site page appears, use the wait element to see whether the desired site page appears or not. When it appears, inspect the visible darkmode switch, and by clicking the switch, it will validate the changes executed by that switch, which leads to darkmode validation.
This class contain methods related to validating dark mode on a site. Here's a brief overview of the class:
-
Element Locators:
VISITSITEWPPOOL: Locator for the "WPPOOL" link.
SITEPAGEVISIT: Locator for visiting a site page.
DARKMODESWITCH: Locator for the dark mode switch.
Method: BackendDarkmode() -
Performs a series of actions to validate dark mode on the site:
Clicks on the "WPPOOL" link.
Waits for the site page to be visible.
Clicks on the dark mode switch three times with delays between clicks.
Darkmode Switch Validation image:
Scenario 12 Execution video: https://drive.google.com/file/d/1xsKYCgyvGtaSixTuGYHdVJcKod1u1Xbl/view?usp=drive_link
Dark mode working objects
package TestingMethodsAndPages;
import org.openqa.selenium.By;
public class DarkModeValidation extends Methods {
public By VISITSITEWPPOOL = By.xpath("//a[normalize-space()='WPPOOL']");
public By SITEPAGEVISIT = By.xpath("(//p[@class='wp-block-site-title'])[1]");
public By DARKMODESWITCH = By.xpath("//label[@for='wp-dark-mode-switch']");
public void BackendDarkmode() throws InterruptedException{
clickElement(VISITSITEWPPOOL);
WaitElementVisible(SITEPAGEVISIT);
clickElement(DARKMODESWITCH);
Thread.sleep(2000);
clickElement(DARKMODESWITCH);
Thread.sleep(2000);
clickElement(DARKMODESWITCH);
Thread.sleep(2000);
}
}
Dark mode validation testSuite[Run as TestNG]
package TestPages;
import org.testng.annotations.Test;
import TestingMethodsAndPages.DarkModeValidation;
import TestingMethodsAndPages.WordPressLoginPortal;
import Wppool.AssignmentWP.BrowserSetup;
public class BackendDarkModeValidation extends BrowserSetup{
WordPressLoginPortal login = new WordPressLoginPortal();
DarkModeValidation DMV = new DarkModeValidation();
@Test(description = "Dark Mode Validation")
public void DarkModeValidationBackEnd() throws InterruptedException{
getDriver().get("http://localhost/wordpress-6.3.1/wordpress/wp-admin");
Thread.sleep(2000);
login.WordPressLogin();
DMV.BackendDarkmode();
DMV.takeScreenshot("Dark Mode Switch Working");
login.Hover(login.SAKIF);
login.clickElement(login.LOGOUT);
}
}
Execution video for reference: https://drive.google.com/file/d/1s9aqVHH1KHOfTLRNIgbcT02dc4eeuP4F/view?usp=drive_link
To run the whole test scenario togather:
By convert the whole test run files to TestNG
-instruction image
-After clicking Convert to TestNG click on finish option
-Now you can ovserve a Testng.xml file under pom.xml file and run that file to see whole testing procedure togather
To create an allure report,
first set dependency in the pom.xml file.
io.qameta.allure
allure-testng
2.19.0
2. then run the testing.xml file
3. then refresh the whole package and see a "allure-results" file created under Maven Dependencies
-before refresh
-after runing the testng.xml file and refresh the whole package allure reasult appear
-
To get allure report open the whole package terminal
-
then write in terminal to clean previous files> ""allure generate ./allure-result --clean""
-
then write in terminal to create allure report> ""allure open ./allure-report""
-
terminal gives us http to show us an allure report file directory
Terminal image(5,6,7):
-
Create some methods for allure report (like allure ScreenShot) which is added already
-
method add:
public void takeScreenshot(String name) {
Allure.addAttachment(name, new ByteArrayInputStream(((TakesScreenshot)getDriver()).getScreenshotAs(OutputType.BYTES)));
}
file link: http://192.168.0.4:58373/
File generation instruction video: https://drive.google.com/file/d/1NXQ0IShmoAQHU3SiEziYfoiopfQ3AKXX/view?usp=drive_link