Depuis WordPress 6.3, la Command Palette permet à un utilisateur d’ouvrir un menu de recherche universel avec Ctrl+K (ou Cmd+K sur macOS) et d’y taper le début d’une action pour l’exécuter sans naviguer dans les menus. Une extension client que nous maintenons y enregistre une commande personnalisée, « Vider le cache des tarifs », pratique pour l’équipe support qui n’a pas à se souvenir dans quel sous-menu se trouve ce bouton. Après une mise à jour de l’extension, cette commande a cessé d’apparaître dans les résultats de recherche, sans qu’aucune erreur ne remonte nulle part : l’enregistrement de la commande échouait silencieusement à cause d’un identifiant dupliqué avec une autre extension.
Ce genre de régression silencieuse, qui ne casse rien mais rend une fonctionnalité invisible, est exactement le type de défaut qu’un test end-to-end automatisé attrape facilement, alors qu’il passe inaperçu en test manuel si personne ne pense à ouvrir la palette ce jour-là.
Ouvrir la palette et vérifier sa présence
import { test, expect } from '@playwright/test';
test('la Command Palette s’ouvre et propose la commande personnalisée', async ({ page }) => {
await page.goto('/wp-admin/edit.php');
await page.keyboard.press('Control+k');
const palette = page.locator('.commands-command-menu');
await expect(palette).toBeVisible();
});Rechercher la commande par son libellé exact
On tape ensuite un fragment du libellé de la commande, comme le ferait un membre de l’équipe support pressé, plutôt que le libellé complet, pour vérifier que la recherche floue fonctionne bien :
await page.keyboard.type('vider tarif');
const resultat = page.locator('.commands-command-menu__item', {
hasText: 'Vider le cache des tarifs',
});
await expect(resultat).toBeVisible();Ce test aurait échoué exactement dans les mêmes conditions que l’incident client, puisque la commande, non enregistrée à cause du conflit d’identifiant, n’apparaissait simplement jamais dans cette liste.
Vérifier l’exécution réelle de la commande, pas seulement sa visibilité
Un défaut plus subtil peut aussi survenir : la commande apparaît bien dans la recherche, mais son exécution ne déclenche rien à cause d’un callback mal lié. Il faut donc aussi vérifier l’effet réel :
await resultat.click();
await expect(page.locator('.components-snackbar')).toContainText('Cache des tarifs vidé');
Cette vérification suppose que la commande, une fois exécutée côté client en JavaScript, déclenche un appel à l’API REST qu’on peut aussi intercepter pour confirmer qu’il part bien vers le bon endpoint :
const [requete] = await Promise.all([
page.waitForRequest(req => req.url().includes('/wp-json/mon-plugin/v1/vider-cache-tarifs')),
resultat.click(),
]);
expect(requete.method()).toBe('POST');Couvrir le cas de la commande contextuelle
Certaines commandes ne doivent apparaître que sur des écrans précis, via le paramètre context de wp.commands.registerCommand. Un test doit vérifier autant leur présence là où elles sont utiles que leur absence ailleurs, pour éviter de polluer la palette d’options non pertinentes :
- Sur l’écran d’édition d’une fiche tarifaire : la commande « Vider le cache des tarifs » doit apparaître.
- Sur l’écran des réglages généraux, sans lien avec la tarification : elle ne doit pas apparaître, pour ne pas noyer les résultats pertinents.
- Après fermeture puis réouverture de la palette, l’historique des commandes récentes doit refléter la dernière commande exécutée.
test('la commande tarifs n’apparaît pas hors contexte', async ({ page }) => {
await page.goto('/wp-admin/options-general.php');
await page.keyboard.press('Control+k');
await page.keyboard.type('vider tarif');
const resultat = page.locator('.commands-command-menu__item', {
hasText: 'Vider le cache des tarifs',
});
await expect(resultat).toHaveCount(0);
});Vérifier le raccourci sur les deux systèmes d’exploitation
Une équipe support mélange souvent Windows et macOS. La combinaison Ctrl+K fonctionne sur les deux, mais un raccourci personnalisé ajouté par une extension qui ne gère que Control sans prévoir l’équivalent Meta côté macOS casse silencieusement pour la moitié de l’équipe. On rejoue donc le scénario d’ouverture avec les deux combinaisons dans la suite, plutôt que de supposer qu’une seule suffit :
for (const combinaison of ['Control+k', 'Meta+k']) {
test(`ouverture de la palette avec ${combinaison}`, async ({ page }) => {
await page.goto('/wp-admin/edit.php');
await page.keyboard.press(combinaison);
await expect(page.locator('.commands-command-menu')).toBeVisible();
});
}En résumé
La Command Palette est devenue un point d’entrée à part entière de l’administration WordPress, au même titre qu’un menu classique, et mérite le même niveau de couverture de test. Ce billet ne traite pas de la manière de construire une commande côté extension, seulement de la façon de vérifier qu’elle reste accessible et fonctionnelle après chaque changement, ce qui suffit déjà à éviter la plupart des régressions silencieuses observées en pratique.
