Add Playwright e2e tests to validate taxanomy - Categories & Tags

tests/e2e/specs/posts/categories-tests.test.js

@@ -0,0 +1,209 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Category Tests', () => {
+	async function deleteAllCategories( { page, admin } ) {
+		await admin.visitAdminPage( '/edit-tags.php?taxonomy=category' );
+
+		//delete all categories
+		await page
+			.getByRole( 'checkbox', { name: 'Select All' } )
+			.first()
+			.click();
+		await page
+			.getByRole( 'combobox', { name: 'action' } )
+			.first()
+			.selectOption( 'Delete' );
+		await page.getByRole( 'button', { name: 'Apply' } ).first().click();
+	}
+
+	// create new category
+	async function setupCategory( {
+		page,
+		admin,
+		categoryName = 'Test Category',
+		parent = null,
+	} ) {
+		await admin.visitAdminPage( '/edit-tags.php?taxonomy=category' );
+
+		await page
+			.getByRole( 'textbox', { name: 'Name' } )
+			.fill( categoryName );
+		// add parent category
+		if ( parent ) {
+			await page
+				.getByRole( 'combobox', { name: 'Parent' } )
+				.selectOption( parent );
+		}
+
+		await page
+			.getByRole( 'combobox', { name: 'Parent' } )
+			.selectOption( parent );
+		await page.getByRole( 'button', { name: 'Add New Category' } ).click();
+	}
+
+	// delete all posts and categories before each test
+	test.beforeEach( async ( { requestUtils, admin, page } ) => {
+		await requestUtils.deleteAllPosts();
+		await deleteAllCategories( { page, admin } );
+		await setupCategory( { page, admin } );
+	} );
+
+	test( 'Should be able to create a new category', async ( {
+		page,
+	} ) => {
+		await expect(
+			page.locator( '#ajax-response' ).getByText( 'Category added.' )
+		).toBeVisible({ timeout: 20000 });
+	} );
+
+	test( 'Should be able to create a new category with parent category', async ( {
+		page,
+		admin,
+	} ) => {
+
+		//setup category with parent
+		await setupCategory( {
+			page,
+			admin,
+			categoryName: 'Child Category',
+			parent: 'Test Category',
+		} );
+
+		// validate category is created
+		await expect(
+			page.locator( '#ajax-response' ).getByText( 'Category added.' )
+		).toBeVisible();
+	} );
+
+	test( 'Should be able to quick edit a Category', async ( {
+		page,
+		admin,
+	} ) => {
+
+		// hover and quick edit a category
+		await page.hover( 'role=link[name= "“Test Category” (Edit)"i]' );
+		await page
+			.getByRole( 'button', { name: 'Quick Edit' } )
+			.first()
+			.click();
+
+		// update category name
+		await page
+			.getByRole( 'group', { name: 'Quick Edit' } )
+			.getByLabel( 'Name' )
+			.fill( 'Updated Category' );
+		await page.getByRole( 'button', { name: 'Update Category' } ).click();
+		await expect(
+			page.getByRole( 'link', { name: 'Updated Category” (Edit)' } )
+		).toContainText( 'Updated Category' );
+	} );
+
+	test( 'Should be able to delete a Category', async ( {
+		admin,
+		page,
+	} ) => {
+
+		await page.hover( 'role=link[name= "“Test Category” (Edit)"i]' );
+
+		// handle confirm modal and accept delete of category
+		page.on( 'dialog', async ( dialog ) => {
+			expect( dialog.type() ).toContain( 'confirm' );
+			expect( dialog.message() ).toContain(
+				'You are about to permanently delete these items from your site.'
+			);
+			await dialog.accept();
+		} );
+
+		// click on the delete button
+		await page.getByRole( 'button', { name: 'Delete' } ).first().click();
+
+		// validate category is deleted
+		await expect(
+			page.getByRole( 'link', { name: 'Test Category” (Edit)' } )
+		).not.toBeVisible();
+	} );
+
+	test( 'Should be able to sort categories as per name', async ( {
+		page,
+		admin,
+	} ) => {
+		await page.getByRole( 'link', { name: 'Name' } ).first().click();
+
+		// validate page url and category order
+		await expect(page.url()).toContain('?taxonomy=category&orderby=name&order=desc');
+		await expect( page.locator( '.row-title' ).first() ).not.toContainText(
+			'Test Category'
+		);
+		await page.getByRole( 'link', { name: 'Name' } ).first().click();
+		await expect(page.url()).toContain('?taxonomy=category&orderby=name&order=asc');
+		await expect( page.locator( '.row-title' ).first() ).toContainText(
+			'Test Category'
+		);
+	} );
+
+	test( 'Should be able to sort categories as per count', async ( {
+		page,
+		admin,
+		editor,
+	} ) => {
+		// create new post
+		await admin.createNewPost( { postType: 'post', title: 'Test Post' } );
+
+		// assign newly created category
+		await page
+			.getByRole( 'button' )
+			.and( page.getByText( 'Categories' ) )
+			.click();
+		await page.getByLabel( 'Test Category' ).check();
+
+		// publish post
+		await editor.publishPost();
+
+		// check category count
+		await admin.visitAdminPage( '/edit-tags.php?taxonomy=category' );
+
+		await page.getByRole( 'link', { name: 'Count' } ).first().click();
+		await expect(page.url()).toContain('?taxonomy=category&orderby=count&order=asc');
+		await expect(
+			page.locator( '.posts.column-posts' ).first()
+		).toContainText( '0' );
+		await page.getByRole( 'link', { name: 'Count' } ).first().click();
+		await expect(page.url()).toContain('?taxonomy=category&orderby=count&order=desc');
+		await expect(
+			page.locator( '.posts.column-posts' ).first()
+		).toContainText( '1' );
+	} );
+
+	test( 'Should be able to assign category to a post', async ( {
+		page,
+		admin,
+		editor,
+	} ) => {
+		await setupCategory( { page, admin } );
+		// create new post
+		await admin.createNewPost( { postType: 'post', title: 'Test Post' } );
+
+		// assign newly created category
+		await page
+			.getByRole( 'button' )
+			.and( page.getByText( 'Categories' ) )
+			.click();
+		await page.getByLabel( 'Test Category' ).check();
+
+		// publish post
+		await editor.publishPost();
+
+		// check category count
+		await admin.visitAdminPage( '/edit-tags.php?taxonomy=category' );
+		await expect( page.locator( '.row-title' ).first() ).toContainText(
+			'Test Category'
+		);
+
+		await expect(
+			page.locator( '.posts.column-posts' ).first()
+		).toContainText( '1' );
+	} );
+} );

tests/e2e/specs/posts/tags-tests.test.js

@@ -0,0 +1,186 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Tag Tests', () => {
+	const pageLink = `/edit-tags.php?taxonomy=post_tag`;
+
+	//delete all categories
+	async function deleteAllTags( { page, admin } ) { 
+		await admin.visitAdminPage( pageLink );
+
+		// validate if tags exist
+		const tagsExist = await page
+			.locator( '#bulk-action-selector-top' )
+			.isVisible();
+
+		// delete tags if exist
+		if ( tagsExist ) {
+			await page
+				.getByRole( 'checkbox', { name: 'Select All' } )
+				.first()
+				.click();
+			await page
+				.getByRole( 'combobox', { name: 'action' } )
+				.first()
+				.selectOption( 'Delete' );
+			await page.getByRole( 'button', { name: 'Apply' } ).first().click();
+		}
+	}
+
+	// create new Tag
+	async function createTag( { page, admin, tagName = 'Test Tag' } ) {
+		await admin.visitAdminPage( pageLink );
+		await page.getByRole( 'textbox', { name: 'Name' } ).fill( tagName );
+		await page.getByRole( 'button', { name: 'Add New Tag' } ).click();
+
+	}
+
+	async function publishPostWithTag( { page, admin, editor, tagName = 'Test Tag' } ) {
+		// add a post 
+		await admin.createNewPost( { postType: 'post', title: 'Test Post' } );
+
+		// assign newly created tag
+		const tagInputFieldVisible = await page.locator( '.components-panel__body input' ).isVisible();
+
+		// if tag input field is not visible, click on Tags button
+
+		if (await ! tagInputFieldVisible) {
+			await page.locator('.components-panel__body').last().click();
+		}
+		//await page.waitForTimeout(20000)
+		await page
+			.locator( '.components-panel__body input' )
+			.fill( tagName );
+		await page.locator( '.components-form-token-field__suggestion-match' ).click();
+
+		// publish post
+		await editor.publishPost();
+
+	}
+
+
+	test.beforeEach( async ( { page, admin, requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+		await deleteAllTags( { page, admin } );
+		await createTag( { page, admin } );
+	} );
+
+	test( 'Should be able to create a new tag', async ( { page } ) => {
+		await expect(
+			page.locator( '#ajax-response' ).getByText( 'Tag added.' )
+		).toBeVisible();
+	} );
+
+	test( 'Should be able to quick edit a Tag', async ( {
+		page,
+		admin,
+	} ) => {
+		// hover over tag titlee and click quick edit
+		await page.hover( 'role=link[name= "“Test Tag” (Edit)"i]' );
+		await page
+			.getByRole( 'button', { name: 'Quick Edit' } )
+			.first()
+			.click();
+
+		// update tag name
+		await page
+			.getByRole( 'group', { name: 'Quick Edit' } )
+			.getByLabel( 'Name' )
+			.fill( 'Updated Tag' );
+		await page.getByRole( 'button', { name: 'Update Tag' } ).click();
+		await expect(
+			page.getByRole( 'link', { name: 'Updated Tag” (Edit)' } )
+		).toBeVisible();
+	} );
+
+	test( 'Should be able to delete a Tag', async ( {
+		page,
+	} ) => {
+		// handle confirm modal and accept delete of tag
+		page.on( 'dialog', async ( dialog ) => {
+			expect( dialog.type() ).toContain( 'confirm' );
+			expect( dialog.message() ).toContain(
+				'You are about to permanently delete these items from your site.'
+			);
+			await dialog.accept();
+		} );
+
+		// hover over tag title and click delete
+		await page.hover( 'role=link[name= "“Test Tag” (Edit)"i]' );
+		await page.getByRole( 'button', { name: 'Delete' } ).first().click();
+		await expect(
+			page.getByRole( 'link', { name: 'Test Tag” (Edit)' } )
+		).not.toBeVisible();
+	} );
+
+	test( 'Should be able to sort tags as per name', async ( { 
+		admin,
+		page,
+	} ) => {
+		// add an additional tag to check sorting
+		await createTag( { page, admin, tagName: 'Sample Tag to validate sorting' } );
+		await page.getByRole( 'link', { name: 'Name' } ).first().click();
+
+		// validate page url and tag order
+		await expect(page.url()).toContain('?taxonomy=post_tag&orderby=name&order=desc');
+		await expect( page.locator( '.row-title' ).first() ).toContainText(
+			'Test Tag'
+		);
+		await page.getByRole( 'link', { name: 'Name' } ).first().click();
+		await expect(page.url()).toContain('?taxonomy=post_tag&orderby=name&order=asc');
+		await expect( page.locator( '.row-title' ).first() ).toContainText(
+			'Sample Tag to validate sorting'
+		);
+
+	});
+
+	test( 'Should be able to sort tags as per count', async ( { 
+		admin,
+		page,
+		editor,
+	} ) => {
+		// add an additional tag to check sorting with count
+		await createTag( { page, admin, tagName: 'Sample Tag to validate sorting' } );
+
+		// create a post and assign tag to it
+		await publishPostWithTag( { page, admin, editor } );
+
+		// visit tags page
+		await admin.visitAdminPage('/edit-tags.php?taxonomy=post_tag')
+
+		// validate page url and tag order
+		await page.getByRole( 'link', { name: 'Count' } ).first().click();
+
+		await expect(page.url()).toContain('?taxonomy=post_tag&orderby=count&order=asc');
+		await expect( page.locator( '.posts.column-posts' ).first() ).toContainText(
+			'0'
+		);
+		await page.getByRole( 'link', { name: 'Count' } ).first().click();
+		await expect(page.url()).toContain('?taxonomy=post_tag&orderby=count&order=desc');
+		await expect( page.locator( '.posts.column-posts' ).first() ).toContainText(
+			'1'
+		);
+
+	});
+
+	test( 'Should create new post and add tag', async ( {
+		page,
+		admin,
+		editor,
+	} ) => {
+
+		// create a new post and add tag
+		await publishPostWithTag( { page, admin, editor } );
+
+		// check category count
+		await admin.visitAdminPage( '/edit-tags.php?taxonomy=post_tag' );
+		await expect( page.locator( '.row-title' ).first() ).toContainText(
+			'Test Tag'
+		);
+		await expect(
+			page.locator( '.posts.column-posts' ).first()
+		).toContainText( '1' );
+	} );
+} );